From b06b5aac1c0fa1c0bf8e1949fb37c6de3de6cafe Mon Sep 17 00:00:00 2001
From: undefined-parth <parthkharbanda.pk776@gmail.com>
Date: Sat, 21 Mar 2026 16:38:37 +0530
Subject: [PATCH] Add full width toggle button for all cards

---
 .../{main-DGg9PKhg.css => main-CC9IF3fq.css}  |    2 +-
 .../{main-DZNOAHNq.js => main-CDlbpbEp.js}    |    2 +-
 docs/index.html                               | 4482 +++++++++--------
 studylocus/index.html                         |   84 +
 studylocus/src/main.js                        |   12 +
 5 files changed, 2381 insertions(+), 2201 deletions(-)
 rename docs/assets/{main-DGg9PKhg.css => main-CC9IF3fq.css} (97%)
 rename docs/assets/{main-DZNOAHNq.js => main-CDlbpbEp.js} (88%)

diff --git a/docs/assets/main-DGg9PKhg.css b/docs/assets/main-CC9IF3fq.css
similarity index 97%
rename from docs/assets/main-DGg9PKhg.css
rename to docs/assets/main-CC9IF3fq.css
index 87cb054..d1c786c 100644
--- a/docs/assets/main-DGg9PKhg.css
+++ b/docs/assets/main-CC9IF3fq.css
@@ -1 +1 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media(min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media(min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media(min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media(min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media(min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-3{bottom:.75rem}.bottom-4{bottom:1rem}.left-0{left:0}.left-4{left:1rem}.left-\[-6px\]{left:-6px}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-2{top:.5rem}.top-3{top:.75rem}.top-4{top:1rem}.-z-40{z-index:-40}.-z-50{z-index:-50}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[9999\]{z-index:9999}.order-last{order:9999}.col-span-4{grid-column:span 4 / span 4}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.\!grid{display:grid!important}.grid{display:grid}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-40{height:10rem}.h-5{height:1.25rem}.h-56{height:14rem}.h-64{height:16rem}.h-8{height:2rem}.h-\[1px\]{height:1px}.h-\[2px\]{height:2px}.h-\[600px\]{height:600px}.h-\[80vh\]{height:80vh}.h-full{height:100%}.h-px{height:1px}.max-h-32{max-height:8rem}.max-h-48{max-height:12rem}.max-h-\[300px\]{max-height:300px}.max-h-\[80vh\]{max-height:80vh}.max-h-\[900px\]{max-height:900px}.min-h-0{min-height:0px}.min-h-\[250px\]{min-height:250px}.min-h-\[40px\]{min-height:40px}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11\/12{width:91.666667%}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-64{width:16rem}.w-8{width:2rem}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0px}.min-w-\[100px\]{min-width:100px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-\[500px\]{max-width:500px}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.origin-right{transform-origin:right}.origin-top-right{transform-origin:top right}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-2{row-gap:.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[3rem\]{border-radius:3rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-4{border-width:4px}.border-\[1\.5px\]{border-width:1.5px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[\#5865F2\]\/20{border-color:#5865f233}.border-\[var\(--accent-color\)\]{border-color:var(--accent-color)}.border-\[var\(--border-color\)\]{border-color:var(--border-color)}.border-amber-400{--tw-border-opacity: 1;border-color:rgb(251 191 36 / var(--tw-border-opacity, 1))}.border-amber-500\/20{border-color:#f59e0b33}.border-blue-500\/20{border-color:#3b82f633}.border-blue-500\/30{border-color:#3b82f64d}.border-blue-700\/50{border-color:#1d4ed880}.border-gray-400{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}.border-gray-500{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1))}.border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.border-gray-700\/30{border-color:#3741514d}.border-gray-700\/50{border-color:#37415180}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-green-500\/10{border-color:#22c55e1a}.border-green-500\/30{border-color:#22c55e4d}.border-green-700\/50{border-color:#15803d80}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.border-red-500\/10{border-color:#ef44441a}.border-red-500\/20{border-color:#ef444433}.border-red-900\/30{border-color:#7f1d1d4d}.border-transparent{border-color:transparent}.border-white\/10{border-color:#ffffff1a}.border-white\/40{border-color:#fff6}.border-white\/5{border-color:#ffffff0d}.border-zinc-800{--tw-border-opacity: 1;border-color:rgb(39 39 42 / var(--tw-border-opacity, 1))}.bg-\[var\(--accent-color\)\]{background-color:var(--accent-color)}.bg-\[var\(--border-color\)\]{background-color:var(--border-color)}.bg-\[var\(--card-bg-color\)\]{background-color:var(--card-bg-color)}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-amber-500\/20{background-color:#f59e0b33}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-black\/10{background-color:#0000001a}.bg-black\/20{background-color:#0003}.bg-black\/40{background-color:#0006}.bg-black\/50{background-color:#00000080}.bg-black\/60{background-color:#0009}.bg-black\/80{background-color:#000c}.bg-blue-500\/20{background-color:#3b82f633}.bg-blue-900\/20{background-color:#1e3a8a33}.bg-gray-500{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity, 1))}.bg-gray-600{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-gray-700\/30{background-color:#3741514d}.bg-gray-700\/50{background-color:#37415180}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-800\/50{background-color:#1f293780}.bg-gray-900\/95{background-color:#111827f2}.bg-green-400{--tw-bg-opacity: 1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-green-500\/20{background-color:#22c55e33}.bg-green-500\/5{background-color:#22c55e0d}.bg-green-600{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-green-700{--tw-bg-opacity: 1;background-color:rgb(21 128 61 / var(--tw-bg-opacity, 1))}.bg-green-900\/20{background-color:#14532d33}.bg-indigo-500\/10{background-color:#6366f11a}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-indigo-600\/80{background-color:#4f46e5cc}.bg-purple-600{--tw-bg-opacity: 1;background-color:rgb(147 51 234 / var(--tw-bg-opacity, 1))}.bg-red-500\/10{background-color:#ef44441a}.bg-red-500\/20{background-color:#ef444433}.bg-red-500\/5{background-color:#ef44440d}.bg-red-600{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.bg-red-600\/80{background-color:#dc2626cc}.bg-red-700{--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity, 1))}.bg-red-900\/10{background-color:#7f1d1d1a}.bg-sky-600{--tw-bg-opacity: 1;background-color:rgb(2 132 199 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/10{background-color:#ffffff1a}.bg-white\/5{background-color:#ffffff0d}.bg-yellow-400{--tw-bg-opacity: 1;background-color:rgb(250 204 21 / var(--tw-bg-opacity, 1))}.bg-yellow-600{--tw-bg-opacity: 1;background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1))}.bg-zinc-900{--tw-bg-opacity: 1;background-color:rgb(24 24 27 / var(--tw-bg-opacity, 1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-white{--tw-gradient-from: #fff var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-\[var\(--accent-color\)\]{--tw-gradient-to: var(--accent-color) var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.fill-current{fill:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-6{padding-bottom:1.5rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pr-1{padding-right:.25rem}.pr-12{padding-right:3rem}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.font-serif{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[5rem\]{font-size:5rem}.text-\[6rem\]{font-size:6rem}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#5865F2\]{--tw-text-opacity: 1;color:rgb(88 101 242 / var(--tw-text-opacity, 1))}.text-\[var\(--accent-color\)\]{color:var(--accent-color)}.text-\[var\(--text-primary\)\]{color:var(--text-primary)}.text-\[var\(--text-secondary\)\]{color:var(--text-secondary)}.text-amber-200{--tw-text-opacity: 1;color:rgb(253 230 138 / var(--tw-text-opacity, 1))}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-blue-200{--tw-text-opacity: 1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-cyan-400{--tw-text-opacity: 1;color:rgb(34 211 238 / var(--tw-text-opacity, 1))}.text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-green-500{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.text-green-500\/20{color:#22c55e33}.text-indigo-400{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.text-orange-400{--tw-text-opacity: 1;color:rgb(251 146 60 / var(--tw-text-opacity, 1))}.text-orange-500{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity: 1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-red-200\/80{color:#fecacacc}.text-red-300{--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-red-500\/20{color:#ef444433}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/20{color:#fff3}.text-white\/40{color:#fff6}.text-white\/60{color:#fff9}.text-white\/80{color:#fffc}.text-white\/90{color:#ffffffe6}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.text-yellow-500{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}.text-zinc-400{--tw-text-opacity: 1;color:rgb(161 161 170 / var(--tw-text-opacity, 1))}.text-zinc-600{--tw-text-opacity: 1;color:rgb(82 82 91 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.decoration-gray-500{text-decoration-color:#6b7280}.decoration-dotted{text-decoration-style:dotted}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-gray-600::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(75 85 99 / var(--tw-placeholder-opacity, 1))}.placeholder-gray-600::placeholder{--tw-placeholder-opacity: 1;color:rgb(75 85 99 / var(--tw-placeholder-opacity, 1))}.placeholder-white\/20::-moz-placeholder{color:#fff3}.placeholder-white\/20::placeholder{color:#fff3}.placeholder-white\/30::-moz-placeholder{color:#ffffff4d}.placeholder-white\/30::placeholder{color:#ffffff4d}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-100{opacity:1}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_10px_rgba\(var\(--accent-color-rgb\)\,0\.4\)\]{--tw-shadow: 0 0 10px rgba(var(--accent-color-rgb),.4);--tw-shadow-colored: 0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-indigo-500\/20{--tw-shadow-color: rgb(99 102 241 / .2);--tw-shadow: var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-black\/5{--tw-ring-color: rgb(0 0 0 / .05)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-2xl{--tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / .15));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-2xl{--tw-backdrop-blur: blur(40px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-1000{transition-duration:1s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}*,*:before,*:after{box-sizing:border-box}html,body{width:100%;overflow-x:hidden;margin:0;padding:0}:root,[data-theme=alakh-pandey],[data-theme=dracula],[data-theme=forest],[data-theme=ocean],[data-theme=rose-gold],[data-theme=sunset]{--card-shadow: 0 4px 12px rgba(0, 0, 0, .3) }.day,.tab-btn{cursor:pointer}#bg-overlay,.aspect-w-16>*,.modal-overlay{right:0;bottom:0;top:0}.card{position:relative;background-clip:padding-box;border:1px solid transparent}#customize-modal.modal-overlay,#info-modal.modal-overlay{align-items:flex-start;padding-top:2rem;padding-bottom:2rem;overflow-y:auto}#customize-modal.modal-overlay>.card,#info-modal.modal-overlay>.card{flex-shrink:0}.tab-nav{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:1.5rem}.tab-btn{padding:.75rem .5rem;border:none;background-color:transparent;color:var(--text-secondary);font-size:.9rem;font-weight:600;border-bottom:3px solid transparent;transition:.2s;flex:1;word-break:break-word;line-height:1.3;text-align:center}.card,.form-input,.tab-btn:hover,body,select.form-input option{color:var(--text-primary)}.day .tooltip,.modal-overlay{transition:opacity .3s;pointer-events:none}.tab-btn.active{color:var(--accent-color);border-bottom-color:var(--accent-color)}.tab-content{animation:.3s ease-in-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}:root{--bg-color: #0d1117;--card-bg-color: rgba(22, 27, 34, .4);--border-color: #30363d;--text-primary: #c9d1d9;--text-secondary: #8b949e;--accent-color: #58a6ff;--accent-glow: 0 0 15px rgba(88, 166, 255, .3);--font-family: "Inter", sans-serif;--day-past-color: #21262d;--day-future-color: #0e4429;--day-today-color: var(--accent-color);--day-exam-color: #9e2a2b;--day-part-test-color: #1f6feb }[data-theme=cyberpunk]{--bg-color: #02020a;--card-bg-color: rgba(9, 9, 20, .75);--border-color: #00f3ff;--text-primary: #e0faff;--text-secondary: #00f3ff;--accent-color: #ff00ff;--accent-glow: 0 0 20px rgba(255, 0, 255, .7), 0 0 40px rgba(255, 0, 255, .3);--card-shadow: 0 0 15px rgba(0, 243, 255, .2), inset 0 0 10px rgba(0, 243, 255, .05);--day-past-color: #12122b;--day-future-color: #2a2a50;--day-today-color: #ffffff;--day-exam-color: #ff003c;--day-part-test-color: #fcee0a}[data-theme=forest]{--bg-color: #0f1812;--card-bg-color: rgba(20, 35, 25, .6);--border-color: #2f5e38;--text-primary: #e2e8f0;--text-secondary: #94a3b8;--accent-color: #4ade80;--accent-glow: 0 0 15px rgba(74, 222, 128, .3);--day-past-color: #18261e;--day-future-color: #22543d;--day-today-color: #fcd34d;--day-exam-color: #f87171;--day-part-test-color: #38bdf8}[data-theme=rose-gold]{--bg-color: #1c1014;--card-bg-color: rgba(45, 25, 30, .6);--border-color: #9f5f6c;--text-primary: #fff1f2;--text-secondary: #d6b4bc;--accent-color: #fb7185;--accent-glow: 0 0 15px rgba(251, 113, 133, .4);--day-past-color: #381e25;--day-future-color: #831843;--day-today-color: #ffffff;--day-exam-color: #e11d48;--day-part-test-color: #fbcfe8}[data-theme=ocean]{--bg-color: #020617;--card-bg-color: rgba(15, 23, 42, .65);--border-color: #1e40af;--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #38bdf8;--accent-glow: 0 0 15px rgba(56, 189, 248, .3);--day-past-color: #172554;--day-future-color: #1e3a8a;--day-today-color: #ccfbf1;--day-exam-color: #ef4444;--day-part-test-color: #60a5fa}[data-theme=sunset]{--bg-color: #2a0a2e;--card-bg-color: rgba(50, 15, 55, .6);--border-color: #c026d3;--text-primary: #fae8ff;--text-secondary: #e879f9;--accent-color: #f59e0b;--accent-glow: 0 0 15px rgba(245, 158, 11, .4);--day-past-color: #4a044e;--day-future-color: #86198f;--day-today-color: #ffffff;--day-exam-color: #db2777;--day-part-test-color: #fcd34d}[data-theme=dracula]{--bg-color: #282a36;--card-bg-color: rgba(40, 42, 54, .75);--border-color: #6272a4;--text-primary: #f8f8f2;--text-secondary: #bfbfbf;--accent-color: #ff79c6;--accent-glow: 0 0 15px rgba(255, 121, 198, .3);--day-past-color: #44475a;--day-future-color: #6272a4;--day-today-color: #f1fa8c;--day-exam-color: #ff5555;--day-part-test-color: #8be9fd}[data-theme=alakh-pandey]{--bg-color: #111111;--card-bg-color: rgba(30, 30, 30, .7);--border-color: #ca8a04;--text-primary: #ffffff;--text-secondary: #d4d4d4;--accent-color: #eab308;--accent-glow: 0 0 15px rgba(234, 179, 8, .3);--day-past-color: #262626;--day-future-color: #404040;--day-today-color: #ffffff;--day-exam-color: #dc2626;--day-part-test-color: #fef08a}[data-theme=chaitanya-noob]{--bg-color: #000000;--card-bg-color: rgba(0, 20, 0, .85);--border-color: #00ff00;--text-primary: #00ff00;--text-secondary: #008f11;--accent-color: #00ff00;--accent-glow: 0 0 10px rgba(0, 255, 0, .4);--card-shadow: 0 0 0px transparent;--day-past-color: transparent;--day-future-color: #003300;--day-today-color: #ffffff;--day-exam-color: #ff0000;--day-part-test-color: #00ff00}[data-theme=coffee]{--bg-color: #1b1414;--card-bg-color: rgba(62, 39, 35, .6);--border-color: #8d6e63;--text-primary: #efebe9;--text-secondary: #d7ccc8;--accent-color: #d7ccc8;--accent-glow: 0 0 15px rgba(215, 204, 200, .3);--day-past-color: #3e2723;--day-future-color: #5d4037;--day-today-color: #ffffff;--day-exam-color: #ffab91;--day-part-test-color: #a1887f}[data-theme=nordic]{--bg-color: #0f172a;--card-bg-color: rgba(30, 41, 59, .7);--border-color: #475569;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--accent-color: #38bdf8;--accent-glow: 0 0 15px rgba(56, 189, 248, .4);--day-past-color: #1e293b;--day-future-color: #334155;--day-today-color: #e0f2fe;--day-exam-color: #f43f5e;--day-part-test-color: #7dd3fc}[data-theme=lavender]{--bg-color: #151019;--card-bg-color: rgba(40, 30, 50, .65);--border-color: #7c3aed;--text-primary: #f3e8ff;--text-secondary: #c084fc;--accent-color: #d8b4fe;--accent-glow: 0 0 20px rgba(192, 132, 252, .3);--day-past-color: #2e1065;--day-future-color: #4c1d95;--day-today-color: #ffffff;--day-exam-color: #f472b6;--day-part-test-color: #a78bfa}[data-theme=crimson]{--bg-color: #050000;--card-bg-color: rgba(30, 5, 5, .7);--border-color: #7f1d1d;--text-primary: #ffe4e6;--text-secondary: #fca5a5;--accent-color: #ef4444;--accent-glow: 0 0 15px rgba(239, 68, 68, .5);--day-past-color: #450a0a;--day-future-color: #7f1d1d;--day-today-color: #ffffff;--day-exam-color: #991b1b;--day-part-test-color: #f87171}[data-theme=god-mode]{--bg-color: #000000;--card-bg-color: rgba(0, 0, 0, .8);--border-color: #22c55e;--text-primary: #4ade80;--text-secondary: #15803d;--accent-color: #22c55e;--font-family: "Fira Code", monospace;--day-past-color: #052e16;--day-future-color: #14532d;--day-today-color: #ffffff;--day-exam-color: #dc2626;--day-part-test-color: #22d3ee}body{font-family:var(--font-family);background-color:var(--bg-color);background-size:cover;background-position:center;background-attachment:fixed;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:background-color .5s,background-image .5s}#bg-overlay{position:fixed;left:0;background-color:#00000080;z-index:-1}.graph-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));grid-auto-rows:14px;grid-gap:3px;overflow:visible!important}[data-theme=chaitanya-noob]{--bg-color: #000000;--card-bg-color: transparent;--border-color: #39ff14;--text-primary: #39ff14;--text-secondary: #ff00ff;--accent-color: #39ff14;--accent-glow: 0 0 20px rgba(57, 255, 20, .5);--card-shadow: 0 0 10px rgba(57, 255, 20, .3);--day-past-color: transparent;--day-future-color: transparent;--day-today-color: transparent;--day-exam-color: transparent;--day-part-test-color: transparent }[data-theme=god-mode]{--bg-color: #000000;--card-bg-color: rgba(10, 20, 10, .7);--border-color: #00ff00;--text-primary: #00ff00;--text-secondary: #008000;--accent-color: #00ff00;--font-family: "Fira Code", monospace;--day-past-color: #002000;--day-future-color: #004000;--day-today-color: #00ff00;--day-exam-color: #ff0000;--day-part-test-color: #00ffff }[data-theme=chaitanya-noob] .card{backdrop-filter:none;-webkit-backdrop-filter:none}[data-theme=chaitanya-noob] .graph-container .day{border:none!important}[data-theme=chaitanya-noob] .graph-container .day:before{content:"🤓";font-size:12px;line-height:14px;display:block;text-align:center}[data-theme=chaitanya-noob] .graph-container .day-today{border:1px solid var(--accent-color)!important}body{font-family:var(--font-family);background-color:var(--bg-color);background-size:cover;background-position:center;background-attachment:fixed;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:background-color .5s,background-image .5s;padding-top:0}.top-bar{display:none}.default-header{display:flex}[data-riced-mode=true] body{padding-top:48px}[data-riced-mode=true] .default-header{display:none}[data-riced-mode=true] .top-bar{position:fixed;top:0;left:0;right:0;height:48px;background-color:var(--card-bg-color);border-bottom:1px solid var(--border-color);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 1rem;z-index:100;transition:box-shadow .3s}[data-riced-mode=true] .top-bar-left{justify-self:start}[data-riced-mode=true] .top-bar-center{justify-self:center}[data-riced-mode=true] .top-bar-right{justify-self:end}[data-riced-mode=true] .top-bar h1{font-size:1.25rem}[data-riced-mode=true] .top-bar .header-controls{display:flex;align-items:center;gap:.5rem}[data-riced-mode=true] .top-bar .header-controls button{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:.5rem;transition:.2s;border-radius:0}[data-riced-mode=true] .top-bar .header-controls button:hover{background-color:#ffffff1a;color:var(--text-primary);border-color:var(--accent-color)}[data-riced-mode=true] .top-bar .header-controls .btn-primary{background-color:var(--accent-color);color:var(--bg-color);border-color:var(--accent-color)}[data-riced-mode=true] .top-bar .header-controls .btn-primary:hover{filter:brightness(1.2)}[data-riced-mode=true] .card{border-radius:0;box-shadow:none;border:1px solid var(--border-color);transition:border-color .2s,box-shadow .2s}[data-riced-mode=true] .card:hover{border-color:var(--accent-color)}[data-riced-mode=true] .form-input,[data-riced-mode=true] .btn-primary,[data-riced-mode=true] .card-header-controls button,[data-riced-mode=true] .day .tooltip,[data-riced-mode=true] .progress-bar,[data-riced-mode=true] .pomodoro-btn,[data-riced-mode=true] .chart-toggles button,[data-riced-mode=true] #mobile-alert,[data-riced-mode=true] .fab-menu,[data-riced-mode=true] #user-menu-dropdown,[data-riced-mode=true] .todo-item,[data-riced-mode=true] .marks-list li,[data-riced-mode=true] .fab-menu a{border-radius:0}[data-riced-mode=true] .btn-primary:hover,[data-riced-mode=true][data-sub-theme=cyberpunk] .top-bar,[data-riced-mode=true][data-sub-theme=god-mode] .top-bar,[data-riced-mode=true][data-sub-theme=cyberpunk] .card:hover,[data-riced-mode=true][data-sub-theme=god-mode] .card:hover{box-shadow:var(--accent-glow)}[data-riced-mode=true] .youtube-container{border-radius:0}[data-riced-mode=true] .todo-checkbox{border-radius:.25rem}#bg-overlay{position:fixed;left:0;background-color:#0000004d;z-index:-1}.graph-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));grid-auto-rows:14px;grid-gap:3px;overflow-x:auto}.day{width:14px;height:14px;border-radius:3px;position:relative}.day-past{background-color:var(--day-past-color)}.day-future{background-color:var(--day-future-color)}.day-today{background-color:var(--day-today-color);border:1px solid var(--accent-color)}.day-exam{background-color:var(--day-exam-color)}.day-part-test{background-color:var(--day-part-test-color)}.day .tooltip{visibility:hidden;background-color:#161b22f2;color:#e6edf3;text-align:left;border-radius:6px;padding:8px 12px;position:absolute;z-index:1000;bottom:140%;left:50%;transform:translate(-50%);opacity:0;font-size:11px;line-height:1.4;border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 15px #00000080;pointer-events:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;width:-moz-max-content;width:max-content;max-width:200px;white-space:normal}.day .tooltip:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(22,27,34,.95) transparent transparent transparent}.day:hover .tooltip{visibility:visible;opacity:1;transform:translate(-50%) translateY(-5px)}#countdown-timer{font-size:1.75rem;font-weight:600}@media(min-width:640px){#countdown-timer{font-size:2.25rem}}@media(min-width:1024px){#countdown-timer{font-size:2.5rem}}.card{background-color:var(--card-bg-color);border:1px solid color-mix(in srgb,var(--accent-color) 40%,var(--border-color));border-radius:16px;padding:1.25rem;backdrop-filter:blur(45px);-webkit-backdrop-filter:blur(45px);box-shadow:var(--card-shadow)}.card-header{display:flex;justify-content:space-between;align-items:center;padding:0;margin-bottom:.75rem}.card-header h2{margin-left:.25rem}.card-header-controls{display:flex;align-items:center;gap:.25rem}@media screen and (max-width:768px){input,select,textarea{font-size:16px!important}}.card-header-controls button{color:var(--text-secondary);padding:.25rem;border-radius:9999px;transition:color .2s,background-color .2s}.card-header-controls button:hover{color:var(--text-primary);background-color:#ffffff1a}.drag-handle{cursor:grab;padding:.5rem}.sortable-ghost{background:#1f2937;opacity:.6;border:2px dashed var(--accent-color)}.sortable-chosen{cursor:grabbing}.modal-overlay{position:fixed;left:0;background-color:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;opacity:0}.modal-overlay:not(.hidden){opacity:1;pointer-events:auto}.modal-overlay>.card{transform:scale(.95);opacity:0;transition:transform .3s,opacity .3s}.modal-overlay:not(.hidden)>.card{transform:scale(1);opacity:1}.todo-item.completed span{text-decoration:line-through;color:var(--text-secondary)}.form-input{background-color:#0003;border:1px solid var(--border-color);transition:border-color .2s,box-shadow .2s;border-radius:12px}.form-input:focus{outline:0;border-color:var(--accent-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 40%,transparent)}.btn-primary{background-color:var(--accent-color);color:#fff;box-shadow:0 2px 5px #0003;border:1px solid transparent;transition:.2s ease-in-out;border-radius:12px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 10px #0000004d,var(--accent-glow)}[data-theme=alakh-pandey] .btn-primary,[data-theme=chaitanya-noob] .btn-primary,[data-theme=cyberpunk] .btn-primary,[data-theme=dracula] .btn-primary,[data-theme=ocean] .btn-primary,[data-theme=rose-gold] .btn-primary,[data-theme=sunset] .btn-primary{color:var(--bg-color)}.text-secondary{color:var(--text-secondary)}select.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}[data-theme=light] select.form-input{background-color:#f0f0f0;color:var(--text-primary)}select.form-input option{background:var(--card-bg-color);color:var(--text-primary)}[data-theme=light] select.form-input option{background:#fff;color:#1f2937}#super-focus-overlay{background-size:cover;background-position:center;background-attachment:fixed}#super-focus-overlay:before{content:"";position:absolute;inset:0;background:#05050cd9;z-index:-1}#focus-quote-display{transition:opacity .8s ease-in-out;opacity:1}.focus-tab-btn.active{background-color:#fff;color:#000;box-shadow:0 0 15px #ffffff4d}body.zen-mode .card-header-controls,body.zen-mode .delete-mark-item,body.zen-mode .delete-test-btn,body.zen-mode .delete-todo-item,body.zen-mode .delete-subtask-btn,body.zen-mode .toggle-add-marks-form,body.zen-mode .toggle-manual-form,body.zen-mode .fab-container,body.zen-mode .log-btn,body.zen-mode .pomodoro-btn,body.zen-mode .pomodoro-settings,body.zen-mode .reset-btn,body.zen-mode footer,body.zen-mode form,body.zen-mode header,body.zen-mode .top-bar{display:none!important}body.zen-mode .subtasks-section{display:block!important}body.zen-mode .subtasks-section.hidden{display:none!important}.ambient-slider{-webkit-appearance:none;background:transparent}.ambient-slider::-webkit-slider-runnable-track{width:100%;height:6px;background:#ffffff1a;border-radius:3px;-webkit-transition:background .2s;transition:background .2s}.ambient-slider:hover::-webkit-slider-runnable-track{background:#fff3}.ambient-slider::-webkit-slider-thumb{-webkit-appearance:none;height:14px;width:14px;border-radius:50%;background:var(--accent-color);margin-top:-4px;box-shadow:0 0 10px #00000080;-webkit-transition:transform .1s;transition:transform .1s}.ambient-slider:active::-webkit-slider-thumb{transform:scale(1.2);background:#fff}.chart-container{position:relative;height:300px;width:100%;margin-top:1rem;overflow:hidden}.marks-chart{filter:drop-shadow(0 0 4px rgba(139,92,246,.2))}#sync-status{transition:opacity .5s}body.zen-mode[data-riced-mode=true] .top-bar{display:none}body.zen-mode[data-riced-mode=true]{padding-top:0}.progress-bar{border-radius:12px!important}.pomodoro-btn.active,.todo-checkbox:checked,.youtube-container:after{background-color:var(--accent-color)}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}.delete-card-btn:hover{color:#ef4444!important}.pomodoro-btn.active,[data-theme=light] .pomodoro-btn.active{color:#fff}.aspect-w-16{position:relative;padding-bottom:56.25%}.aspect-w-16>*{position:absolute;height:100%;width:100%;left:0}.fab-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:40}.fab-menu{visibility:hidden;opacity:0;transform:translateY(10px);transition:.2s ease-out;position:absolute;bottom:100%;right:0;margin-bottom:.5rem}.fab-container:hover .fab-menu{visibility:visible;opacity:1;transform:translateY(0)}.todo-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.25rem;height:1.25rem;border-radius:.25rem;border:1px solid var(--border-color);background-color:transparent;cursor:pointer;position:relative;transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.todo-checkbox:checked{border-color:var(--accent-color)}.todo-checkbox:checked:after{content:"✔";position:absolute;color:#fff;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.8rem}[data-theme=light] .todo-checkbox:checked:after{color:var(--card-bg-color)}body.zen-mode .card-header-controls,body.zen-mode .delete-mark-item,body.zen-mode .delete-test-btn,body.zen-mode .delete-todo-item,body.zen-mode .fab-container,body.zen-mode .log-btn,body.zen-mode .pomodoro-btn,body.zen-mode .pomodoro-settings,body.zen-mode .reset-btn,body.zen-mode footer,body.zen-mode form,body.zen-mode header,body.zen-mode .top-bar{display:none}body.zen-mode .card:hover{transform:none;box-shadow:var(--card-shadow)}body.zen-mode .card-header{justify-content:center}.youtube-container{position:relative;border-radius:.375rem;overflow:hidden}.youtube-container:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:.2;mix-blend-mode:screen;pointer-events:none;transition:background-color .5s,opacity .5s;z-index:1}.youtube-container.tint-disabled:after{opacity:0}.youtube-iframe{transition:filter .3s ease-in-out}.youtube-container.blurred .youtube-iframe{filter:blur(16px)}.form-input-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:38px;height:22px;border-radius:9999px;background-color:#fff3;border:1px solid var(--border-color);transition:background-color .2s ease-in-out;cursor:pointer}.form-input-toggle:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background-color:#fff;transition:transform .2s ease-in-out}.form-input-toggle:checked{background-color:var(--accent-color)}.form-input-toggle:checked:before{transform:translate(16px)}.legend-item{display:flex;align-items:center;gap:.5rem}.legend-color{width:12px;height:12px;border-radius:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes fall-apart{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}#sync-status-toast{position:fixed;top:1rem;right:1rem;background-color:var(--card-bg-color);color:var(--text-secondary);padding:.5rem 1rem;border-radius:8px;font-size:.875rem;z-index:101;opacity:0;transform:translateY(-20px);transition:opacity .3s,transform .3s;pointer-events:none;border:1px solid var(--border-color);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}#sync-status-toast.show{opacity:1;transform:translateY(0)}@media(max-width:768px){.toggle-colspan-btn{display:none!important}}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.custom-scrollbar::-webkit-scrollbar-track{background:#ffffff05}input[type=date]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#1f2937;color:#fff;min-height:40px;padding:.5rem;border-radius:.375rem;color-scheme:dark}input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.5em}select.form-input{background-color:#0000004d;color:var(--text-primary);border-color:var(--border-color)}select.form-input option{background-color:var(--bg-color);color:var(--text-primary)}[data-theme=light] select.form-input{background-color:#fff;color:#333;border:1px solid #cccccc}[data-theme=light] select.form-input option{background-color:#fff;color:#000}@media(max-width:768px){#open-focus-mode-btn{display:none!important}}#user-menu-dropdown .card{background-color:var(--day-past-color)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 10px 30px #00000080}[data-theme=light] #user-menu-dropdown .card{background-color:#ffffffe6;border-color:#e5e7eb}#user-menu-dropdown .card{background-color:var(--card-bg-color);border:1px solid var(--border-color);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:8px}#sign-in-btn{color:var(--text-primary);border-color:var(--border-color)}#sign-in-btn:hover{border-color:var(--accent-color);background-color:#ffffff0d}#user-menu-dropdown{transition:transform .15s ease-out,opacity .15s ease-out,visibility .15s}@media(max-width:768px){#sign-in-btn span{display:none}#sign-in-btn{padding:6px!important}#user-menu-container{position:static}#user-menu-dropdown{right:1rem!important;left:auto!important;width:200px!important;margin-top:5px!important}#user-menu-dropdown .card{width:100%}}body.zen-mode .manual-entry-container{display:none!important}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-track{background:#ffffff0d}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.subject-pill{font-family:Fira Code,monospace;font-size:9px;padding:2px 6px;border-radius:4px;font-weight:700;letter-spacing:-.5px}.subject-pill.phy{background:#3b82f626;color:#60a5fa;border:1px solid rgba(59,130,246,.3)}.subject-pill.chem{background:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.3)}.subject-pill.math{background:#f9731626;color:#fb923c;border:1px solid rgba(249,115,22,.3)}.priority-btn{letter-spacing:.05em;box-shadow:0 0 10px #0000001a}.add-subtask-form input::-moz-placeholder{-moz-transition:color .2s ease;transition:color .2s ease}.add-subtask-form input::placeholder{transition:color .2s ease}.add-subtask-form:focus-within input::-moz-placeholder{color:var(--text-secondary)}.add-subtask-form:focus-within input::placeholder{color:var(--text-secondary)}[data-streamlined-mode=true] body{padding:0!important;overflow-x:hidden}[data-streamlined-mode=true] .container{max-width:100vw!important;padding:0 20px 20px!important;margin:0!important}[data-streamlined-mode=true] #dashboard-grid{display:grid;gap:16px!important;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;padding-bottom:3rem}[data-streamlined-mode=true] #dashboard-grid .card:not(.hidden){background-color:var(--card-bg-color)!important;border:1px solid var(--border-color);border-radius:8px!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:20px!important;display:flex;flex-direction:column;min-height:180px;transform:none!important;transition:none!important}[data-streamlined-mode=true] #dashboard-grid .card:not(.hidden):hover{border-color:var(--border-color)!important;transform:none!important}[data-streamlined-mode=true] .card:before{display:none}[data-streamlined-mode=true] .default-header{background-color:var(--bg-color);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:40;margin:0 -20px 20px!important;padding:16px 32px;background-color:color-mix(in srgb,var(--bg-color) 95%,transparent)}[data-streamlined-mode=true] #main-title{font-size:1.25rem;font-weight:700}[data-streamlined-mode=true] #dashboard-grid .card-header{background-color:#ffffff08;border-bottom:1px solid var(--border-color);margin:-20px -20px 16px!important;width:calc(100% + 40px)!important;padding:12px 20px!important;display:flex;align-items:center;justify-content:space-between;min-height:48px}[data-streamlined-mode=true] #dashboard-grid .card-header h2{font-size:.85rem;text-transform:uppercase;font-weight:700;letter-spacing:.05em;color:var(--text-secondary);margin:0}[data-streamlined-mode=true] .card-content,[data-streamlined-mode=true] .youtube-container,[data-streamlined-mode=true] #countdown-timer,[data-streamlined-mode=true] .todo-list,[data-streamlined-mode=true] .study-log-list{padding:0!important;flex-grow:1;width:100%}[data-streamlined-mode=true] .btn-primary,[data-streamlined-mode=true] .pomodoro-btn,[data-streamlined-mode=true] button.start-pause-btn,[data-streamlined-mode=true] button.reset-btn,[data-streamlined-mode=true] button.log-btn,[data-streamlined-mode=true] .todo-input-group button{border-radius:4px!important;box-shadow:none!important;font-size:.75rem!important;font-weight:600;padding:4px 8px!important;margin:2px!important;border:1px solid var(--border-color);white-space:nowrap;flex-shrink:0;height:auto;min-height:28px}[data-streamlined-mode=true] .flex,[data-streamlined-mode=true] .gap-2,[data-streamlined-mode=true] .gap-4,[data-streamlined-mode=true] .pomodoro-controls,[data-streamlined-mode=true] .card-content>div{flex-wrap:wrap!important}[data-streamlined-mode=true] .btn-primary{background-color:var(--text-primary);color:var(--bg-color);border-color:transparent}[data-streamlined-mode=true] .btn-primary:hover{background-color:#fff;opacity:.9}[data-streamlined-mode=true] .card-header button{padding:2px 4px!important;border:none!important;margin:0!important;min-height:auto!important}[data-streamlined-mode=true] .graph-container{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(14px,1fr))!important;gap:4px!important;padding:0!important;justify-content:center;width:100%;overflow-x:auto}[data-streamlined-mode=true] li{padding:8px 12px!important;margin-bottom:6px!important;border-radius:4px;border:1px solid transparent}[data-streamlined-mode=true] li:hover{background-color:#ffffff08;border-color:var(--border-color)}[data-streamlined-mode=true] .form-input{background-color:#0003;border:1px solid var(--border-color);padding:10px 12px;border-radius:6px!important;width:100%;box-sizing:border-box}[data-streamlined-mode=true] .modal-overlay .card{padding:24px!important;margin:0!important;display:block}[data-streamlined-mode=true] .modal-overlay .card-header{margin:0 0 16px!important;width:100%!important;background:transparent!important;border:none!important;padding:0!important}.subject-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background-color:#ffffff1a;border:1px solid var(--border-color);font-size:.75rem;color:var(--text-primary);transition:all .2s}.subject-chip:hover{background-color:#ffffff26;border-color:var(--accent-color)}.delete-subject-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#0000004d;color:var(--text-secondary);cursor:pointer;font-size:10px;line-height:1;transition:color .2s,background-color .2s}.delete-subject-btn:hover{background-color:#ef4444;color:#fff}.settings-nav-btn{display:flex;align-items:center;width:100%;padding:12px 20px;text-align:left;background:transparent;border:none;border-left:3px solid transparent;color:var(--text-secondary);font-size:.9rem;font-weight:500;transition:all .2s ease;cursor:pointer}.settings-nav-btn:hover{background-color:#ffffff0d;color:var(--text-primary)}.settings-nav-btn.active{background-color:#ffffff14;color:var(--accent-color);border-left-color:var(--accent-color)}@media(max-width:768px){.settings-nav-btn{width:auto;white-space:nowrap;border-left:none;border-bottom:3px solid transparent;padding:12px 16px}.settings-nav-btn.active{border-left:none;border-bottom-color:var(--accent-color)}}.settings-panel{animation:fadeInPanel .2s ease-out}@keyframes fadeInPanel{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.settings-group{background-color:#0003;border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:16px}.settings-panel select,.settings-panel input[type=text],.settings-panel input[type=date]{border-radius:8px!important;padding:10px 14px!important;height:42px!important;font-size:.95rem!important;line-height:1.5!important;background-color:#0006!important;border:1px solid rgba(255,255,255,.15)!important;color:var(--text-primary)!important}.settings-panel select:focus,.settings-panel input:focus{border-color:var(--accent-color)!important;background-color:#0009!important;outline:none}#add-subject-btn{border-radius:8px!important;height:42px!important;padding:0 20px!important;font-size:.9rem!important}.settings-panel select option{background-color:#1a1a1a;color:#fff;padding:8px}.card-option.active{background-color:rgba(var(--accent-color-rgb),.15)!important;border-color:var(--accent-color)!important;box-shadow:0 0 10px rgba(var(--accent-color-rgb),.2)}.card-option.active svg{color:var(--accent-color)}.card-option.active{background-color:#ffffff26!important;border-color:var(--accent-color)!important}.header-capsule{width:100%;max-width:none;margin:0 0 1.5rem!important;padding:.5rem 1rem!important;min-height:50px;border-radius:16px;border-color:var(--border-color);background-color:var(--card-bg-color);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 20px #0003,0 0 0 1px #ffffff0d;position:relative;z-index:50;transition:transform .3s ease,box-shadow .3s ease}.header-capsule:hover{box-shadow:0 8px 30px #0000004d,0 0 0 1px #ffffff1a;transform:translateY(-1px)}.capsule-btn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#ffffff08;border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;padding:0}.capsule-btn svg{width:16px;height:16px}.capsule-btn:hover{background-color:var(--accent-color);border-color:var(--accent-color);color:var(--bg-color);transform:scale(1.1);box-shadow:0 0 15px var(--accent-glow)}.capsule-btn:active{transform:scale(.95)}@media(max-width:640px){.header-capsule{border-radius:16px!important;padding:.5rem .75rem!important}}[data-theme=cyberpunk] .header-capsule{border-color:#628df6;background-color:#02020ad9!important}[data-theme=cyberpunk] .capsule-btn{border-color:#628df6;box-shadow:0 0 5px #628df6}[data-theme=cyberpunk] .capsule-btn:hover{background-color:var(--accent-color);box-shadow:var(--accent-glow)!important;border-color:var(--accent-color);color:#000}.brand-text{font-family:Poppins,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--accent-color);padding:.25rem .75rem;background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:9999px;text-shadow:none;opacity:.9}[data-theme=cyberpunk] .brand-text{border-color:#628df6;box-shadow:0 0 10px #00f3ff33;color:var(--text-primary)}.view-tab-btn.active{background-color:var(--accent-color);color:var(--bg-color);box-shadow:0 0 15px var(--accent-glow)}.animate-fade-in-down{animation:fadeInDown .3s ease-out forwards}.cal-day-cell{border-right:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);padding:.5rem;display:flex;flex-direction:column;gap:4px;height:100%;min-height:0;transition:background-color .2s;position:relative;overflow:hidden}.cal-day-cell:hover{background-color:#ffffff05}.cal-day-header{font-size:.75rem;font-weight:600;color:var(--text-secondary);margin-bottom:2px;display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;flex-shrink:0}.cal-task-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:2px;padding-right:2px}.cal-task-container::-webkit-scrollbar{width:3px}.cal-task-container::-webkit-scrollbar-track{background:transparent}.cal-task-container::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.cal-task-container::-webkit-scrollbar-thumb:hover{background:#fff6}.cal-day-cell.today .cal-day-header{background-color:var(--accent-color);color:var(--bg-color)}.cal-day-cell.other-month{opacity:.4;background-color:#0003}.cal-task-pill{font-size:.7rem;padding:3px 5px;background-color:#3b82f633;border:1px solid rgba(59,130,246,.4);color:#93c5fd;border-radius:4px;cursor:grab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0}.cal-task-pill:hover{transform:translateY(-1px);border-color:#60a5fa;z-index:10}.cal-task-pill.completed{background-color:#10b9811a;border-color:#10b9814d;color:#6ee7b7;text-decoration:line-through;opacity:.7}.cal-task-pill[data-priority=high]{border-left:3px solid #ef4444}.cal-task-pill[data-priority=medium]{border-left:3px solid #f59e0b}.cal-task-pill[data-priority=low]{border-left:3px solid #3b82f6}@media(max-width:768px){#static-focus-btn,#open-focus-mode-btn{display:none!important}#user-menu-dropdown{right:0!important;left:auto!important;margin-right:10px!important;width:200px!important;max-width:90vw!important;position:absolute!important;z-index:9999!important}#user-menu-container{position:static}}#main-title,#main-title-riced{touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none}@media(max-width:640px){#online-users-badge{padding-left:.5rem!important;padding-right:.5rem!important;margin-right:.5rem!important;gap:.25rem!important}#online-count-text{font-size:10px}}#ypt-grid{max-width:500px;margin:0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.ypt-cell{aspect-ratio:1 / 1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border:1px solid rgba(255,255,255,.05);background-color:#ffffff05;transition:transform .2s ease,box-shadow .2s ease;cursor:default}.ypt-cell:hover{transform:translateY(-2px) scale(1.05);z-index:10;box-shadow:0 4px 15px #00000080;border-color:var(--accent-color)}.ypt-date{font-size:10px;font-weight:700;opacity:.5;position:absolute;top:4px;left:5px}.ypt-time{font-size:10px;font-weight:700;margin-top:10px;letter-spacing:-.02em}.ypt-cell.empty{background:transparent;border:none;pointer-events:none}@media(max-width:640px){#ypt-grid{max-width:100%;gap:4px}.ypt-cell{border-radius:6px}.ypt-date{font-size:8px;top:2px;left:3px}.ypt-time{font-size:8px;margin-top:8px}}#view-statistics .card,#view-calendar .card{background-color:#0c0c0ce6!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);box-shadow:0 10px 40px #000c}#quote{font-family:Roboto Slab,serif!important;font-weight:400}html.lite-mode *,html.lite-mode *:before,html.lite-mode *:after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}html.lite-mode .card,html.lite-mode .custom-card,html.lite-mode .glass-panel,html.lite-mode .modal-overlay>.card{background-color:var(--bg-color, #18181b)!important;border-color:var(--border-color, #3f3f46)!important;background-image:linear-gradient(#000c,#000c)!important}html.lite-mode #view-statistics,html.lite-mode #view-calendar,html.lite-mode #main-dashboard,html.lite-mode .tab-content-container{background-color:transparent!important;background-image:none!important;border:none!important}.selection\:bg-indigo-500\/30 *::-moz-selection{background-color:#6366f14d}.selection\:bg-indigo-500\/30 *::selection{background-color:#6366f14d}.selection\:bg-indigo-500\/30::-moz-selection{background-color:#6366f14d}.selection\:bg-indigo-500\/30::selection{background-color:#6366f14d}.hover\:border-blue-500:hover{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.hover\:border-gray-300:hover{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.hover\:border-gray-500:hover{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1))}.hover\:border-gray-600:hover{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.hover\:border-green-500:hover{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.hover\:border-indigo-500\/50:hover{border-color:#6366f180}.hover\:border-red-500:hover{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.hover\:border-red-500\/50:hover{border-color:#ef444480}.hover\:border-white:hover{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.hover\:border-white\/20:hover{border-color:#fff3}.hover\:bg-\[var\(--accent-color\)\]:hover{background-color:var(--accent-color)}.hover\:bg-blue-900\/40:hover{background-color:#1e3a8a66}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-600:hover{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-600\/60:hover{background-color:#4b556399}.hover\:bg-gray-700:hover{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-700\/50:hover{background-color:#37415180}.hover\:bg-gray-700\/70:hover{background-color:#374151b3}.hover\:bg-green-800:hover{--tw-bg-opacity: 1;background-color:rgb(22 101 52 / var(--tw-bg-opacity, 1))}.hover\:bg-green-900\/40:hover{background-color:#14532d66}.hover\:bg-indigo-500:hover{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-700:hover{--tw-bg-opacity: 1;background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))}.hover\:bg-purple-700:hover{--tw-bg-opacity: 1;background-color:rgb(126 34 206 / var(--tw-bg-opacity, 1))}.hover\:bg-red-500\/20:hover{background-color:#ef444433}.hover\:bg-red-600:hover{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.hover\:bg-red-700:hover{--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity, 1))}.hover\:bg-red-800:hover{--tw-bg-opacity: 1;background-color:rgb(153 27 27 / var(--tw-bg-opacity, 1))}.hover\:bg-red-900\/30:hover{background-color:#7f1d1d4d}.hover\:bg-sky-700:hover{--tw-bg-opacity: 1;background-color:rgb(3 105 161 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/10:hover{background-color:#ffffff1a}.hover\:bg-white\/20:hover{background-color:#fff3}.hover\:bg-white\/5:hover{background-color:#ffffff0d}.hover\:bg-yellow-700:hover{--tw-bg-opacity: 1;background-color:rgb(161 98 7 / var(--tw-bg-opacity, 1))}.hover\:text-\[var\(--accent-color\)\]:hover{color:var(--accent-color)}.hover\:text-blue-400:hover{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.hover\:text-indigo-400:hover{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.hover\:text-red-300:hover{--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.hover\:text-red-400:hover{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.hover\:text-red-500:hover{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:opacity-100:hover{opacity:1}.hover\:opacity-80:hover{opacity:.8}.hover\:brightness-125:hover{--tw-brightness: brightness(1.25);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\:border-red-500:focus{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.focus\:bg-black\/40:focus{background-color:#0006}.focus\:placeholder-gray-400:focus::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.focus\:placeholder-gray-400:focus::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-\[var\(--accent-color\)\]:focus{--tw-ring-color: var(--accent-color)}.focus\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.active\:scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:cursor-grabbing:active{cursor:grabbing}.group:hover .group-hover\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:border-\[var\(--border-color\)\]{border-color:var(--border-color)}.group:hover .group-hover\:border-green-400{--tw-border-opacity: 1;border-color:rgb(74 222 128 / var(--tw-border-opacity, 1))}.group:hover .group-hover\:bg-green-400\/20{background-color:#4ade8033}.group:hover .group-hover\:text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.group\/log:hover .group-hover\/log\:opacity-100,.group\/sub:hover .group-hover\/sub\:opacity-100,.group:hover .group-hover\:opacity-100{opacity:1}@media(min-width:640px){.sm\:not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media(min-width:768px){.md\:absolute{position:absolute}.md\:left-1\/2{left:50%}.md\:col-span-2{grid-column:span 2 / span 2}.md\:ml-0{margin-left:0}.md\:mt-0{margin-top:0}.md\:block{display:block}.md\:h-\[calc\(100vh-140px\)\]{height:calc(100vh - 140px)}.md\:w-56{width:14rem}.md\:w-auto{width:auto}.md\:-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.md\:overflow-y-auto{overflow-y:auto}.md\:p-12{padding:3rem}.md\:p-20{padding:5rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-\[10rem\]{font-size:10rem}.md\:text-\[8rem\]{font-size:8rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media(min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media(min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media(min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media(min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media(min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media(min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-3{bottom:.75rem}.bottom-4{bottom:1rem}.left-0{left:0}.left-4{left:1rem}.left-\[-6px\]{left:-6px}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-2{top:.5rem}.top-3{top:.75rem}.top-4{top:1rem}.-z-40{z-index:-40}.-z-50{z-index:-50}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[9999\]{z-index:9999}.order-last{order:9999}.col-span-4{grid-column:span 4 / span 4}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.\!grid{display:grid!important}.grid{display:grid}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-40{height:10rem}.h-5{height:1.25rem}.h-56{height:14rem}.h-64{height:16rem}.h-8{height:2rem}.h-\[1px\]{height:1px}.h-\[2px\]{height:2px}.h-\[600px\]{height:600px}.h-\[80vh\]{height:80vh}.h-full{height:100%}.h-px{height:1px}.max-h-32{max-height:8rem}.max-h-48{max-height:12rem}.max-h-\[300px\]{max-height:300px}.max-h-\[80vh\]{max-height:80vh}.max-h-\[900px\]{max-height:900px}.min-h-0{min-height:0px}.min-h-\[250px\]{min-height:250px}.min-h-\[40px\]{min-height:40px}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11\/12{width:91.666667%}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-64{width:16rem}.w-8{width:2rem}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0px}.min-w-\[100px\]{min-width:100px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-\[500px\]{max-width:500px}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.origin-right{transform-origin:right}.origin-top-right{transform-origin:top right}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-2{row-gap:.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[3rem\]{border-radius:3rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-4{border-width:4px}.border-\[1\.5px\]{border-width:1.5px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[\#5865F2\]\/20{border-color:#5865f233}.border-\[var\(--accent-color\)\]{border-color:var(--accent-color)}.border-\[var\(--border-color\)\]{border-color:var(--border-color)}.border-amber-400{--tw-border-opacity: 1;border-color:rgb(251 191 36 / var(--tw-border-opacity, 1))}.border-amber-500\/20{border-color:#f59e0b33}.border-blue-500\/20{border-color:#3b82f633}.border-blue-500\/30{border-color:#3b82f64d}.border-blue-700\/50{border-color:#1d4ed880}.border-gray-400{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}.border-gray-500{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1))}.border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.border-gray-700\/30{border-color:#3741514d}.border-gray-700\/50{border-color:#37415180}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-green-500\/10{border-color:#22c55e1a}.border-green-500\/30{border-color:#22c55e4d}.border-green-700\/50{border-color:#15803d80}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.border-red-500\/10{border-color:#ef44441a}.border-red-500\/20{border-color:#ef444433}.border-red-900\/30{border-color:#7f1d1d4d}.border-transparent{border-color:transparent}.border-white\/10{border-color:#ffffff1a}.border-white\/40{border-color:#fff6}.border-white\/5{border-color:#ffffff0d}.border-zinc-800{--tw-border-opacity: 1;border-color:rgb(39 39 42 / var(--tw-border-opacity, 1))}.bg-\[var\(--accent-color\)\]{background-color:var(--accent-color)}.bg-\[var\(--border-color\)\]{background-color:var(--border-color)}.bg-\[var\(--card-bg-color\)\]{background-color:var(--card-bg-color)}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-amber-500\/20{background-color:#f59e0b33}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-black\/10{background-color:#0000001a}.bg-black\/20{background-color:#0003}.bg-black\/40{background-color:#0006}.bg-black\/50{background-color:#00000080}.bg-black\/60{background-color:#0009}.bg-black\/80{background-color:#000c}.bg-blue-500\/20{background-color:#3b82f633}.bg-blue-900\/20{background-color:#1e3a8a33}.bg-gray-500{--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity, 1))}.bg-gray-600{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-gray-700\/30{background-color:#3741514d}.bg-gray-700\/50{background-color:#37415180}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-800\/50{background-color:#1f293780}.bg-gray-900\/95{background-color:#111827f2}.bg-green-400{--tw-bg-opacity: 1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-green-500\/20{background-color:#22c55e33}.bg-green-500\/5{background-color:#22c55e0d}.bg-green-600{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-green-700{--tw-bg-opacity: 1;background-color:rgb(21 128 61 / var(--tw-bg-opacity, 1))}.bg-green-900\/20{background-color:#14532d33}.bg-indigo-500\/10{background-color:#6366f11a}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-indigo-600\/80{background-color:#4f46e5cc}.bg-purple-600{--tw-bg-opacity: 1;background-color:rgb(147 51 234 / var(--tw-bg-opacity, 1))}.bg-red-500\/10{background-color:#ef44441a}.bg-red-500\/20{background-color:#ef444433}.bg-red-500\/5{background-color:#ef44440d}.bg-red-600{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.bg-red-600\/80{background-color:#dc2626cc}.bg-red-700{--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity, 1))}.bg-red-900\/10{background-color:#7f1d1d1a}.bg-sky-600{--tw-bg-opacity: 1;background-color:rgb(2 132 199 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/10{background-color:#ffffff1a}.bg-white\/5{background-color:#ffffff0d}.bg-yellow-400{--tw-bg-opacity: 1;background-color:rgb(250 204 21 / var(--tw-bg-opacity, 1))}.bg-yellow-600{--tw-bg-opacity: 1;background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1))}.bg-zinc-900{--tw-bg-opacity: 1;background-color:rgb(24 24 27 / var(--tw-bg-opacity, 1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-white{--tw-gradient-from: #fff var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-\[var\(--accent-color\)\]{--tw-gradient-to: var(--accent-color) var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.fill-current{fill:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-6{padding-bottom:1.5rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pr-1{padding-right:.25rem}.pr-12{padding-right:3rem}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.font-serif{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[5rem\]{font-size:5rem}.text-\[6rem\]{font-size:6rem}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#5865F2\]{--tw-text-opacity: 1;color:rgb(88 101 242 / var(--tw-text-opacity, 1))}.text-\[var\(--accent-color\)\]{color:var(--accent-color)}.text-\[var\(--text-primary\)\]{color:var(--text-primary)}.text-\[var\(--text-secondary\)\]{color:var(--text-secondary)}.text-amber-200{--tw-text-opacity: 1;color:rgb(253 230 138 / var(--tw-text-opacity, 1))}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-blue-200{--tw-text-opacity: 1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-cyan-400{--tw-text-opacity: 1;color:rgb(34 211 238 / var(--tw-text-opacity, 1))}.text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-green-500{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.text-green-500\/20{color:#22c55e33}.text-indigo-400{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.text-orange-400{--tw-text-opacity: 1;color:rgb(251 146 60 / var(--tw-text-opacity, 1))}.text-orange-500{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity: 1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-red-200\/80{color:#fecacacc}.text-red-300{--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-red-500\/20{color:#ef444433}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/20{color:#fff3}.text-white\/40{color:#fff6}.text-white\/60{color:#fff9}.text-white\/80{color:#fffc}.text-white\/90{color:#ffffffe6}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.text-yellow-500{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}.text-zinc-400{--tw-text-opacity: 1;color:rgb(161 161 170 / var(--tw-text-opacity, 1))}.text-zinc-600{--tw-text-opacity: 1;color:rgb(82 82 91 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.decoration-gray-500{text-decoration-color:#6b7280}.decoration-dotted{text-decoration-style:dotted}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-gray-600::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(75 85 99 / var(--tw-placeholder-opacity, 1))}.placeholder-gray-600::placeholder{--tw-placeholder-opacity: 1;color:rgb(75 85 99 / var(--tw-placeholder-opacity, 1))}.placeholder-white\/20::-moz-placeholder{color:#fff3}.placeholder-white\/20::placeholder{color:#fff3}.placeholder-white\/30::-moz-placeholder{color:#ffffff4d}.placeholder-white\/30::placeholder{color:#ffffff4d}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-100{opacity:1}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_10px_rgba\(var\(--accent-color-rgb\)\,0\.4\)\]{--tw-shadow: 0 0 10px rgba(var(--accent-color-rgb),.4);--tw-shadow-colored: 0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-indigo-500\/20{--tw-shadow-color: rgb(99 102 241 / .2);--tw-shadow: var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-black\/5{--tw-ring-color: rgb(0 0 0 / .05)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-2xl{--tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / .15));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-2xl{--tw-backdrop-blur: blur(40px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-1000{transition-duration:1s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}*,*:before,*:after{box-sizing:border-box}html,body{width:100%;overflow-x:hidden;margin:0;padding:0}:root,[data-theme=alakh-pandey],[data-theme=dracula],[data-theme=forest],[data-theme=ocean],[data-theme=rose-gold],[data-theme=sunset]{--card-shadow: 0 4px 12px rgba(0, 0, 0, .3) }.day,.tab-btn{cursor:pointer}#bg-overlay,.aspect-w-16>*,.modal-overlay{right:0;bottom:0;top:0}.card{position:relative;background-clip:padding-box;border:1px solid transparent}#customize-modal.modal-overlay,#info-modal.modal-overlay{align-items:flex-start;padding-top:2rem;padding-bottom:2rem;overflow-y:auto}#customize-modal.modal-overlay>.card,#info-modal.modal-overlay>.card{flex-shrink:0}.tab-nav{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:1.5rem}.tab-btn{padding:.75rem .5rem;border:none;background-color:transparent;color:var(--text-secondary);font-size:.9rem;font-weight:600;border-bottom:3px solid transparent;transition:.2s;flex:1;word-break:break-word;line-height:1.3;text-align:center}.card,.form-input,.tab-btn:hover,body,select.form-input option{color:var(--text-primary)}.day .tooltip,.modal-overlay{transition:opacity .3s;pointer-events:none}.tab-btn.active{color:var(--accent-color);border-bottom-color:var(--accent-color)}.tab-content{animation:.3s ease-in-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}:root{--bg-color: #0d1117;--card-bg-color: rgba(22, 27, 34, .4);--border-color: #30363d;--text-primary: #c9d1d9;--text-secondary: #8b949e;--accent-color: #58a6ff;--accent-glow: 0 0 15px rgba(88, 166, 255, .3);--font-family: "Inter", sans-serif;--day-past-color: #21262d;--day-future-color: #0e4429;--day-today-color: var(--accent-color);--day-exam-color: #9e2a2b;--day-part-test-color: #1f6feb }[data-theme=cyberpunk]{--bg-color: #02020a;--card-bg-color: rgba(9, 9, 20, .75);--border-color: #00f3ff;--text-primary: #e0faff;--text-secondary: #00f3ff;--accent-color: #ff00ff;--accent-glow: 0 0 20px rgba(255, 0, 255, .7), 0 0 40px rgba(255, 0, 255, .3);--card-shadow: 0 0 15px rgba(0, 243, 255, .2), inset 0 0 10px rgba(0, 243, 255, .05);--day-past-color: #12122b;--day-future-color: #2a2a50;--day-today-color: #ffffff;--day-exam-color: #ff003c;--day-part-test-color: #fcee0a}[data-theme=forest]{--bg-color: #0f1812;--card-bg-color: rgba(20, 35, 25, .6);--border-color: #2f5e38;--text-primary: #e2e8f0;--text-secondary: #94a3b8;--accent-color: #4ade80;--accent-glow: 0 0 15px rgba(74, 222, 128, .3);--day-past-color: #18261e;--day-future-color: #22543d;--day-today-color: #fcd34d;--day-exam-color: #f87171;--day-part-test-color: #38bdf8}[data-theme=rose-gold]{--bg-color: #1c1014;--card-bg-color: rgba(45, 25, 30, .6);--border-color: #9f5f6c;--text-primary: #fff1f2;--text-secondary: #d6b4bc;--accent-color: #fb7185;--accent-glow: 0 0 15px rgba(251, 113, 133, .4);--day-past-color: #381e25;--day-future-color: #831843;--day-today-color: #ffffff;--day-exam-color: #e11d48;--day-part-test-color: #fbcfe8}[data-theme=ocean]{--bg-color: #020617;--card-bg-color: rgba(15, 23, 42, .65);--border-color: #1e40af;--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #38bdf8;--accent-glow: 0 0 15px rgba(56, 189, 248, .3);--day-past-color: #172554;--day-future-color: #1e3a8a;--day-today-color: #ccfbf1;--day-exam-color: #ef4444;--day-part-test-color: #60a5fa}[data-theme=sunset]{--bg-color: #2a0a2e;--card-bg-color: rgba(50, 15, 55, .6);--border-color: #c026d3;--text-primary: #fae8ff;--text-secondary: #e879f9;--accent-color: #f59e0b;--accent-glow: 0 0 15px rgba(245, 158, 11, .4);--day-past-color: #4a044e;--day-future-color: #86198f;--day-today-color: #ffffff;--day-exam-color: #db2777;--day-part-test-color: #fcd34d}[data-theme=dracula]{--bg-color: #282a36;--card-bg-color: rgba(40, 42, 54, .75);--border-color: #6272a4;--text-primary: #f8f8f2;--text-secondary: #bfbfbf;--accent-color: #ff79c6;--accent-glow: 0 0 15px rgba(255, 121, 198, .3);--day-past-color: #44475a;--day-future-color: #6272a4;--day-today-color: #f1fa8c;--day-exam-color: #ff5555;--day-part-test-color: #8be9fd}[data-theme=alakh-pandey]{--bg-color: #111111;--card-bg-color: rgba(30, 30, 30, .7);--border-color: #ca8a04;--text-primary: #ffffff;--text-secondary: #d4d4d4;--accent-color: #eab308;--accent-glow: 0 0 15px rgba(234, 179, 8, .3);--day-past-color: #262626;--day-future-color: #404040;--day-today-color: #ffffff;--day-exam-color: #dc2626;--day-part-test-color: #fef08a}[data-theme=chaitanya-noob]{--bg-color: #000000;--card-bg-color: rgba(0, 20, 0, .85);--border-color: #00ff00;--text-primary: #00ff00;--text-secondary: #008f11;--accent-color: #00ff00;--accent-glow: 0 0 10px rgba(0, 255, 0, .4);--card-shadow: 0 0 0px transparent;--day-past-color: transparent;--day-future-color: #003300;--day-today-color: #ffffff;--day-exam-color: #ff0000;--day-part-test-color: #00ff00}[data-theme=coffee]{--bg-color: #1b1414;--card-bg-color: rgba(62, 39, 35, .6);--border-color: #8d6e63;--text-primary: #efebe9;--text-secondary: #d7ccc8;--accent-color: #d7ccc8;--accent-glow: 0 0 15px rgba(215, 204, 200, .3);--day-past-color: #3e2723;--day-future-color: #5d4037;--day-today-color: #ffffff;--day-exam-color: #ffab91;--day-part-test-color: #a1887f}[data-theme=nordic]{--bg-color: #0f172a;--card-bg-color: rgba(30, 41, 59, .7);--border-color: #475569;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--accent-color: #38bdf8;--accent-glow: 0 0 15px rgba(56, 189, 248, .4);--day-past-color: #1e293b;--day-future-color: #334155;--day-today-color: #e0f2fe;--day-exam-color: #f43f5e;--day-part-test-color: #7dd3fc}[data-theme=lavender]{--bg-color: #151019;--card-bg-color: rgba(40, 30, 50, .65);--border-color: #7c3aed;--text-primary: #f3e8ff;--text-secondary: #c084fc;--accent-color: #d8b4fe;--accent-glow: 0 0 20px rgba(192, 132, 252, .3);--day-past-color: #2e1065;--day-future-color: #4c1d95;--day-today-color: #ffffff;--day-exam-color: #f472b6;--day-part-test-color: #a78bfa}[data-theme=crimson]{--bg-color: #050000;--card-bg-color: rgba(30, 5, 5, .7);--border-color: #7f1d1d;--text-primary: #ffe4e6;--text-secondary: #fca5a5;--accent-color: #ef4444;--accent-glow: 0 0 15px rgba(239, 68, 68, .5);--day-past-color: #450a0a;--day-future-color: #7f1d1d;--day-today-color: #ffffff;--day-exam-color: #991b1b;--day-part-test-color: #f87171}[data-theme=god-mode]{--bg-color: #000000;--card-bg-color: rgba(0, 0, 0, .8);--border-color: #22c55e;--text-primary: #4ade80;--text-secondary: #15803d;--accent-color: #22c55e;--font-family: "Fira Code", monospace;--day-past-color: #052e16;--day-future-color: #14532d;--day-today-color: #ffffff;--day-exam-color: #dc2626;--day-part-test-color: #22d3ee}body{font-family:var(--font-family);background-color:var(--bg-color);background-size:cover;background-position:center;background-attachment:fixed;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:background-color .5s,background-image .5s}#bg-overlay{position:fixed;left:0;background-color:#00000080;z-index:-1}.graph-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));grid-auto-rows:14px;grid-gap:3px;overflow:visible!important}[data-theme=chaitanya-noob]{--bg-color: #000000;--card-bg-color: transparent;--border-color: #39ff14;--text-primary: #39ff14;--text-secondary: #ff00ff;--accent-color: #39ff14;--accent-glow: 0 0 20px rgba(57, 255, 20, .5);--card-shadow: 0 0 10px rgba(57, 255, 20, .3);--day-past-color: transparent;--day-future-color: transparent;--day-today-color: transparent;--day-exam-color: transparent;--day-part-test-color: transparent }[data-theme=god-mode]{--bg-color: #000000;--card-bg-color: rgba(10, 20, 10, .7);--border-color: #00ff00;--text-primary: #00ff00;--text-secondary: #008000;--accent-color: #00ff00;--font-family: "Fira Code", monospace;--day-past-color: #002000;--day-future-color: #004000;--day-today-color: #00ff00;--day-exam-color: #ff0000;--day-part-test-color: #00ffff }[data-theme=chaitanya-noob] .card{backdrop-filter:none;-webkit-backdrop-filter:none}[data-theme=chaitanya-noob] .graph-container .day{border:none!important}[data-theme=chaitanya-noob] .graph-container .day:before{content:"🤓";font-size:12px;line-height:14px;display:block;text-align:center}[data-theme=chaitanya-noob] .graph-container .day-today{border:1px solid var(--accent-color)!important}body{font-family:var(--font-family);background-color:var(--bg-color);background-size:cover;background-position:center;background-attachment:fixed;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:background-color .5s,background-image .5s;padding-top:0}.top-bar{display:none}.default-header{display:flex}[data-riced-mode=true] body{padding-top:48px}[data-riced-mode=true] .default-header{display:none}[data-riced-mode=true] .top-bar{position:fixed;top:0;left:0;right:0;height:48px;background-color:var(--card-bg-color);border-bottom:1px solid var(--border-color);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 1rem;z-index:100;transition:box-shadow .3s}[data-riced-mode=true] .top-bar-left{justify-self:start}[data-riced-mode=true] .top-bar-center{justify-self:center}[data-riced-mode=true] .top-bar-right{justify-self:end}[data-riced-mode=true] .top-bar h1{font-size:1.25rem}[data-riced-mode=true] .top-bar .header-controls{display:flex;align-items:center;gap:.5rem}[data-riced-mode=true] .top-bar .header-controls button{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:.5rem;transition:.2s;border-radius:0}[data-riced-mode=true] .top-bar .header-controls button:hover{background-color:#ffffff1a;color:var(--text-primary);border-color:var(--accent-color)}[data-riced-mode=true] .top-bar .header-controls .btn-primary{background-color:var(--accent-color);color:var(--bg-color);border-color:var(--accent-color)}[data-riced-mode=true] .top-bar .header-controls .btn-primary:hover{filter:brightness(1.2)}[data-riced-mode=true] .card{border-radius:0;box-shadow:none;border:1px solid var(--border-color);transition:border-color .2s,box-shadow .2s}[data-riced-mode=true] .card:hover{border-color:var(--accent-color)}[data-riced-mode=true] .form-input,[data-riced-mode=true] .btn-primary,[data-riced-mode=true] .card-header-controls button,[data-riced-mode=true] .day .tooltip,[data-riced-mode=true] .progress-bar,[data-riced-mode=true] .pomodoro-btn,[data-riced-mode=true] .chart-toggles button,[data-riced-mode=true] #mobile-alert,[data-riced-mode=true] .fab-menu,[data-riced-mode=true] #user-menu-dropdown,[data-riced-mode=true] .todo-item,[data-riced-mode=true] .marks-list li,[data-riced-mode=true] .fab-menu a{border-radius:0}[data-riced-mode=true] .btn-primary:hover,[data-riced-mode=true][data-sub-theme=cyberpunk] .top-bar,[data-riced-mode=true][data-sub-theme=god-mode] .top-bar,[data-riced-mode=true][data-sub-theme=cyberpunk] .card:hover,[data-riced-mode=true][data-sub-theme=god-mode] .card:hover{box-shadow:var(--accent-glow)}[data-riced-mode=true] .youtube-container{border-radius:0}[data-riced-mode=true] .todo-checkbox{border-radius:.25rem}#bg-overlay{position:fixed;left:0;background-color:#0000004d;z-index:-1}.graph-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));grid-auto-rows:14px;grid-gap:3px;overflow-x:auto}.day{width:14px;height:14px;border-radius:3px;position:relative}.day-past{background-color:var(--day-past-color)}.day-future{background-color:var(--day-future-color)}.day-today{background-color:var(--day-today-color);border:1px solid var(--accent-color)}.day-exam{background-color:var(--day-exam-color)}.day-part-test{background-color:var(--day-part-test-color)}.day .tooltip{visibility:hidden;background-color:#161b22f2;color:#e6edf3;text-align:left;border-radius:6px;padding:8px 12px;position:absolute;z-index:1000;bottom:140%;left:50%;transform:translate(-50%);opacity:0;font-size:11px;line-height:1.4;border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 15px #00000080;pointer-events:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;width:-moz-max-content;width:max-content;max-width:200px;white-space:normal}.day .tooltip:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(22,27,34,.95) transparent transparent transparent}.day:hover .tooltip{visibility:visible;opacity:1;transform:translate(-50%) translateY(-5px)}#countdown-timer{font-size:1.75rem;font-weight:600}@media(min-width:640px){#countdown-timer{font-size:2.25rem}}@media(min-width:1024px){#countdown-timer{font-size:2.5rem}}.card{background-color:var(--card-bg-color);border:1px solid color-mix(in srgb,var(--accent-color) 40%,var(--border-color));border-radius:16px;padding:1.25rem;backdrop-filter:blur(45px);-webkit-backdrop-filter:blur(45px);box-shadow:var(--card-shadow)}.card-header{display:flex;justify-content:space-between;align-items:center;padding:0;margin-bottom:.75rem}.card-header h2{margin-left:.25rem}.card-header-controls{display:flex;align-items:center;gap:.25rem}@media screen and (max-width:768px){input,select,textarea{font-size:16px!important}}.card-header-controls button{color:var(--text-secondary);padding:.25rem;border-radius:9999px;transition:color .2s,background-color .2s}.card-header-controls button:hover{color:var(--text-primary);background-color:#ffffff1a}.drag-handle{cursor:grab;padding:.5rem}.sortable-ghost{background:#1f2937;opacity:.6;border:2px dashed var(--accent-color)}.sortable-chosen{cursor:grabbing}.modal-overlay{position:fixed;left:0;background-color:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;opacity:0}.modal-overlay:not(.hidden){opacity:1;pointer-events:auto}.modal-overlay>.card{transform:scale(.95);opacity:0;transition:transform .3s,opacity .3s}.modal-overlay:not(.hidden)>.card{transform:scale(1);opacity:1}.todo-item.completed span{text-decoration:line-through;color:var(--text-secondary)}.form-input{background-color:#0003;border:1px solid var(--border-color);transition:border-color .2s,box-shadow .2s;border-radius:12px}.form-input:focus{outline:0;border-color:var(--accent-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 40%,transparent)}.btn-primary{background-color:var(--accent-color);color:#fff;box-shadow:0 2px 5px #0003;border:1px solid transparent;transition:.2s ease-in-out;border-radius:12px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 10px #0000004d,var(--accent-glow)}[data-theme=alakh-pandey] .btn-primary,[data-theme=chaitanya-noob] .btn-primary,[data-theme=cyberpunk] .btn-primary,[data-theme=dracula] .btn-primary,[data-theme=ocean] .btn-primary,[data-theme=rose-gold] .btn-primary,[data-theme=sunset] .btn-primary{color:var(--bg-color)}.text-secondary{color:var(--text-secondary)}select.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}[data-theme=light] select.form-input{background-color:#f0f0f0;color:var(--text-primary)}select.form-input option{background:var(--card-bg-color);color:var(--text-primary)}[data-theme=light] select.form-input option{background:#fff;color:#1f2937}#super-focus-overlay{background-size:cover;background-position:center;background-attachment:fixed}#super-focus-overlay:before{content:"";position:absolute;inset:0;background:#05050cd9;z-index:-1}#focus-quote-display{transition:opacity .8s ease-in-out;opacity:1}.focus-tab-btn.active{background-color:#fff;color:#000;box-shadow:0 0 15px #ffffff4d}body.zen-mode .card-header-controls,body.zen-mode .delete-mark-item,body.zen-mode .delete-test-btn,body.zen-mode .delete-todo-item,body.zen-mode .delete-subtask-btn,body.zen-mode .toggle-add-marks-form,body.zen-mode .toggle-manual-form,body.zen-mode .fab-container,body.zen-mode .log-btn,body.zen-mode .pomodoro-btn,body.zen-mode .pomodoro-settings,body.zen-mode .reset-btn,body.zen-mode footer,body.zen-mode form,body.zen-mode header,body.zen-mode .top-bar{display:none!important}body.zen-mode .subtasks-section{display:block!important}body.zen-mode .subtasks-section.hidden{display:none!important}.ambient-slider{-webkit-appearance:none;background:transparent}.ambient-slider::-webkit-slider-runnable-track{width:100%;height:6px;background:#ffffff1a;border-radius:3px;-webkit-transition:background .2s;transition:background .2s}.ambient-slider:hover::-webkit-slider-runnable-track{background:#fff3}.ambient-slider::-webkit-slider-thumb{-webkit-appearance:none;height:14px;width:14px;border-radius:50%;background:var(--accent-color);margin-top:-4px;box-shadow:0 0 10px #00000080;-webkit-transition:transform .1s;transition:transform .1s}.ambient-slider:active::-webkit-slider-thumb{transform:scale(1.2);background:#fff}.chart-container{position:relative;height:300px;width:100%;margin-top:1rem;overflow:hidden}.marks-chart{filter:drop-shadow(0 0 4px rgba(139,92,246,.2))}#sync-status{transition:opacity .5s}body.zen-mode[data-riced-mode=true] .top-bar{display:none}body.zen-mode[data-riced-mode=true]{padding-top:0}.progress-bar{border-radius:12px!important}.pomodoro-btn.active,.todo-checkbox:checked,.youtube-container:after{background-color:var(--accent-color)}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}.delete-card-btn:hover{color:#ef4444!important}.pomodoro-btn.active,[data-theme=light] .pomodoro-btn.active{color:#fff}.aspect-w-16{position:relative;padding-bottom:56.25%}.aspect-w-16>*{position:absolute;height:100%;width:100%;left:0}.fab-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:40}.fab-menu{visibility:hidden;opacity:0;transform:translateY(10px);transition:.2s ease-out;position:absolute;bottom:100%;right:0;margin-bottom:.5rem}.fab-container:hover .fab-menu{visibility:visible;opacity:1;transform:translateY(0)}.todo-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.25rem;height:1.25rem;border-radius:.25rem;border:1px solid var(--border-color);background-color:transparent;cursor:pointer;position:relative;transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.todo-checkbox:checked{border-color:var(--accent-color)}.todo-checkbox:checked:after{content:"✔";position:absolute;color:#fff;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.8rem}[data-theme=light] .todo-checkbox:checked:after{color:var(--card-bg-color)}body.zen-mode .card-header-controls,body.zen-mode .delete-mark-item,body.zen-mode .delete-test-btn,body.zen-mode .delete-todo-item,body.zen-mode .fab-container,body.zen-mode .log-btn,body.zen-mode .pomodoro-btn,body.zen-mode .pomodoro-settings,body.zen-mode .reset-btn,body.zen-mode footer,body.zen-mode form,body.zen-mode header,body.zen-mode .top-bar{display:none}body.zen-mode .card:hover{transform:none;box-shadow:var(--card-shadow)}body.zen-mode .card-header{justify-content:center}.youtube-container{position:relative;border-radius:.375rem;overflow:hidden}.youtube-container:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:.2;mix-blend-mode:screen;pointer-events:none;transition:background-color .5s,opacity .5s;z-index:1}.youtube-container.tint-disabled:after{opacity:0}.youtube-iframe{transition:filter .3s ease-in-out}.youtube-container.blurred .youtube-iframe{filter:blur(16px)}.form-input-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:38px;height:22px;border-radius:9999px;background-color:#fff3;border:1px solid var(--border-color);transition:background-color .2s ease-in-out;cursor:pointer}.form-input-toggle:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background-color:#fff;transition:transform .2s ease-in-out}.form-input-toggle:checked{background-color:var(--accent-color)}.form-input-toggle:checked:before{transform:translate(16px)}.legend-item{display:flex;align-items:center;gap:.5rem}.legend-color{width:12px;height:12px;border-radius:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes fall-apart{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}#sync-status-toast{position:fixed;top:1rem;right:1rem;background-color:var(--card-bg-color);color:var(--text-secondary);padding:.5rem 1rem;border-radius:8px;font-size:.875rem;z-index:101;opacity:0;transform:translateY(-20px);transition:opacity .3s,transform .3s;pointer-events:none;border:1px solid var(--border-color);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}#sync-status-toast.show{opacity:1;transform:translateY(0)}@media(max-width:768px){.toggle-colspan-btn{display:none!important}}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.custom-scrollbar::-webkit-scrollbar-track{background:#ffffff05}input[type=date]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#1f2937;color:#fff;min-height:40px;padding:.5rem;border-radius:.375rem;color-scheme:dark}input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.5em}select.form-input{background-color:#0000004d;color:var(--text-primary);border-color:var(--border-color)}select.form-input option{background-color:var(--bg-color);color:var(--text-primary)}[data-theme=light] select.form-input{background-color:#fff;color:#333;border:1px solid #cccccc}[data-theme=light] select.form-input option{background-color:#fff;color:#000}@media(max-width:768px){#open-focus-mode-btn{display:none!important}}#user-menu-dropdown .card{background-color:var(--day-past-color)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 10px 30px #00000080}[data-theme=light] #user-menu-dropdown .card{background-color:#ffffffe6;border-color:#e5e7eb}#user-menu-dropdown .card{background-color:var(--card-bg-color);border:1px solid var(--border-color);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:8px}#sign-in-btn{color:var(--text-primary);border-color:var(--border-color)}#sign-in-btn:hover{border-color:var(--accent-color);background-color:#ffffff0d}#user-menu-dropdown{transition:transform .15s ease-out,opacity .15s ease-out,visibility .15s}@media(max-width:768px){#sign-in-btn span{display:none}#sign-in-btn{padding:6px!important}#user-menu-container{position:static}#user-menu-dropdown{right:1rem!important;left:auto!important;width:200px!important;margin-top:5px!important}#user-menu-dropdown .card{width:100%}}body.zen-mode .manual-entry-container{display:none!important}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-track{background:#ffffff0d}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.subject-pill{font-family:Fira Code,monospace;font-size:9px;padding:2px 6px;border-radius:4px;font-weight:700;letter-spacing:-.5px}.subject-pill.phy{background:#3b82f626;color:#60a5fa;border:1px solid rgba(59,130,246,.3)}.subject-pill.chem{background:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.3)}.subject-pill.math{background:#f9731626;color:#fb923c;border:1px solid rgba(249,115,22,.3)}.priority-btn{letter-spacing:.05em;box-shadow:0 0 10px #0000001a}.add-subtask-form input::-moz-placeholder{-moz-transition:color .2s ease;transition:color .2s ease}.add-subtask-form input::placeholder{transition:color .2s ease}.add-subtask-form:focus-within input::-moz-placeholder{color:var(--text-secondary)}.add-subtask-form:focus-within input::placeholder{color:var(--text-secondary)}[data-streamlined-mode=true] body{padding:0!important;overflow-x:hidden}[data-streamlined-mode=true] .container{max-width:100vw!important;padding:0 20px 20px!important;margin:0!important}[data-streamlined-mode=true] #dashboard-grid{display:grid;gap:16px!important;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;padding-bottom:3rem}[data-streamlined-mode=true] #dashboard-grid .card:not(.hidden){background-color:var(--card-bg-color)!important;border:1px solid var(--border-color);border-radius:8px!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:20px!important;display:flex;flex-direction:column;min-height:180px;transform:none!important;transition:none!important}[data-streamlined-mode=true] #dashboard-grid .card:not(.hidden):hover{border-color:var(--border-color)!important;transform:none!important}[data-streamlined-mode=true] .card:before{display:none}[data-streamlined-mode=true] .default-header{background-color:var(--bg-color);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:40;margin:0 -20px 20px!important;padding:16px 32px;background-color:color-mix(in srgb,var(--bg-color) 95%,transparent)}[data-streamlined-mode=true] #main-title{font-size:1.25rem;font-weight:700}[data-streamlined-mode=true] #dashboard-grid .card-header{background-color:#ffffff08;border-bottom:1px solid var(--border-color);margin:-20px -20px 16px!important;width:calc(100% + 40px)!important;padding:12px 20px!important;display:flex;align-items:center;justify-content:space-between;min-height:48px}[data-streamlined-mode=true] #dashboard-grid .card-header h2{font-size:.85rem;text-transform:uppercase;font-weight:700;letter-spacing:.05em;color:var(--text-secondary);margin:0}[data-streamlined-mode=true] .card-content,[data-streamlined-mode=true] .youtube-container,[data-streamlined-mode=true] #countdown-timer,[data-streamlined-mode=true] .todo-list,[data-streamlined-mode=true] .study-log-list{padding:0!important;flex-grow:1;width:100%}[data-streamlined-mode=true] .btn-primary,[data-streamlined-mode=true] .pomodoro-btn,[data-streamlined-mode=true] button.start-pause-btn,[data-streamlined-mode=true] button.reset-btn,[data-streamlined-mode=true] button.log-btn,[data-streamlined-mode=true] .todo-input-group button{border-radius:4px!important;box-shadow:none!important;font-size:.75rem!important;font-weight:600;padding:4px 8px!important;margin:2px!important;border:1px solid var(--border-color);white-space:nowrap;flex-shrink:0;height:auto;min-height:28px}[data-streamlined-mode=true] .flex,[data-streamlined-mode=true] .gap-2,[data-streamlined-mode=true] .gap-4,[data-streamlined-mode=true] .pomodoro-controls,[data-streamlined-mode=true] .card-content>div{flex-wrap:wrap!important}[data-streamlined-mode=true] .btn-primary{background-color:var(--text-primary);color:var(--bg-color);border-color:transparent}[data-streamlined-mode=true] .btn-primary:hover{background-color:#fff;opacity:.9}[data-streamlined-mode=true] .card-header button{padding:2px 4px!important;border:none!important;margin:0!important;min-height:auto!important}[data-streamlined-mode=true] .graph-container{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(14px,1fr))!important;gap:4px!important;padding:0!important;justify-content:center;width:100%;overflow-x:auto}[data-streamlined-mode=true] li{padding:8px 12px!important;margin-bottom:6px!important;border-radius:4px;border:1px solid transparent}[data-streamlined-mode=true] li:hover{background-color:#ffffff08;border-color:var(--border-color)}[data-streamlined-mode=true] .form-input{background-color:#0003;border:1px solid var(--border-color);padding:10px 12px;border-radius:6px!important;width:100%;box-sizing:border-box}[data-streamlined-mode=true] .modal-overlay .card{padding:24px!important;margin:0!important;display:block}[data-streamlined-mode=true] .modal-overlay .card-header{margin:0 0 16px!important;width:100%!important;background:transparent!important;border:none!important;padding:0!important}.subject-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background-color:#ffffff1a;border:1px solid var(--border-color);font-size:.75rem;color:var(--text-primary);transition:all .2s}.subject-chip:hover{background-color:#ffffff26;border-color:var(--accent-color)}.delete-subject-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#0000004d;color:var(--text-secondary);cursor:pointer;font-size:10px;line-height:1;transition:color .2s,background-color .2s}.delete-subject-btn:hover{background-color:#ef4444;color:#fff}.settings-nav-btn{display:flex;align-items:center;width:100%;padding:12px 20px;text-align:left;background:transparent;border:none;border-left:3px solid transparent;color:var(--text-secondary);font-size:.9rem;font-weight:500;transition:all .2s ease;cursor:pointer}.settings-nav-btn:hover{background-color:#ffffff0d;color:var(--text-primary)}.settings-nav-btn.active{background-color:#ffffff14;color:var(--accent-color);border-left-color:var(--accent-color)}@media(max-width:768px){.settings-nav-btn{width:auto;white-space:nowrap;border-left:none;border-bottom:3px solid transparent;padding:12px 16px}.settings-nav-btn.active{border-left:none;border-bottom-color:var(--accent-color)}}.settings-panel{animation:fadeInPanel .2s ease-out}@keyframes fadeInPanel{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.settings-group{background-color:#0003;border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:16px}.settings-panel select,.settings-panel input[type=text],.settings-panel input[type=date]{border-radius:8px!important;padding:10px 14px!important;height:42px!important;font-size:.95rem!important;line-height:1.5!important;background-color:#0006!important;border:1px solid rgba(255,255,255,.15)!important;color:var(--text-primary)!important}.settings-panel select:focus,.settings-panel input:focus{border-color:var(--accent-color)!important;background-color:#0009!important;outline:none}#add-subject-btn{border-radius:8px!important;height:42px!important;padding:0 20px!important;font-size:.9rem!important}.settings-panel select option{background-color:#1a1a1a;color:#fff;padding:8px}.card-option.active{background-color:rgba(var(--accent-color-rgb),.15)!important;border-color:var(--accent-color)!important;box-shadow:0 0 10px rgba(var(--accent-color-rgb),.2)}.card-option.active svg{color:var(--accent-color)}.card-option.active{background-color:#ffffff26!important;border-color:var(--accent-color)!important}.header-capsule{width:100%;max-width:none;margin:0 0 1.5rem!important;padding:.5rem 1rem!important;min-height:50px;border-radius:16px;border-color:var(--border-color);background-color:var(--card-bg-color);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 20px #0003,0 0 0 1px #ffffff0d;position:relative;z-index:50;transition:transform .3s ease,box-shadow .3s ease}.header-capsule:hover{box-shadow:0 8px 30px #0000004d,0 0 0 1px #ffffff1a;transform:translateY(-1px)}.capsule-btn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#ffffff08;border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;padding:0}.capsule-btn svg{width:16px;height:16px}.capsule-btn:hover{background-color:var(--accent-color);border-color:var(--accent-color);color:var(--bg-color);transform:scale(1.1);box-shadow:0 0 15px var(--accent-glow)}.capsule-btn:active{transform:scale(.95)}@media(max-width:640px){.header-capsule{border-radius:16px!important;padding:.5rem .75rem!important}}[data-theme=cyberpunk] .header-capsule{border-color:#628df6;background-color:#02020ad9!important}[data-theme=cyberpunk] .capsule-btn{border-color:#628df6;box-shadow:0 0 5px #628df6}[data-theme=cyberpunk] .capsule-btn:hover{background-color:var(--accent-color);box-shadow:var(--accent-glow)!important;border-color:var(--accent-color);color:#000}.brand-text{font-family:Poppins,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--accent-color);padding:.25rem .75rem;background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:9999px;text-shadow:none;opacity:.9}[data-theme=cyberpunk] .brand-text{border-color:#628df6;box-shadow:0 0 10px #00f3ff33;color:var(--text-primary)}.view-tab-btn.active{background-color:var(--accent-color);color:var(--bg-color);box-shadow:0 0 15px var(--accent-glow)}.animate-fade-in-down{animation:fadeInDown .3s ease-out forwards}.cal-day-cell{border-right:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);padding:.5rem;display:flex;flex-direction:column;gap:4px;height:100%;min-height:0;transition:background-color .2s;position:relative;overflow:hidden}.cal-day-cell:hover{background-color:#ffffff05}.cal-day-header{font-size:.75rem;font-weight:600;color:var(--text-secondary);margin-bottom:2px;display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;flex-shrink:0}.cal-task-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:2px;padding-right:2px}.cal-task-container::-webkit-scrollbar{width:3px}.cal-task-container::-webkit-scrollbar-track{background:transparent}.cal-task-container::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.cal-task-container::-webkit-scrollbar-thumb:hover{background:#fff6}.cal-day-cell.today .cal-day-header{background-color:var(--accent-color);color:var(--bg-color)}.cal-day-cell.other-month{opacity:.4;background-color:#0003}.cal-task-pill{font-size:.7rem;padding:3px 5px;background-color:#3b82f633;border:1px solid rgba(59,130,246,.4);color:#93c5fd;border-radius:4px;cursor:grab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0}.cal-task-pill:hover{transform:translateY(-1px);border-color:#60a5fa;z-index:10}.cal-task-pill.completed{background-color:#10b9811a;border-color:#10b9814d;color:#6ee7b7;text-decoration:line-through;opacity:.7}.cal-task-pill[data-priority=high]{border-left:3px solid #ef4444}.cal-task-pill[data-priority=medium]{border-left:3px solid #f59e0b}.cal-task-pill[data-priority=low]{border-left:3px solid #3b82f6}@media(max-width:768px){#static-focus-btn,#open-focus-mode-btn{display:none!important}#user-menu-dropdown{right:0!important;left:auto!important;margin-right:10px!important;width:200px!important;max-width:90vw!important;position:absolute!important;z-index:9999!important}#user-menu-container{position:static}}#main-title,#main-title-riced{touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none}@media(max-width:640px){#online-users-badge{padding-left:.5rem!important;padding-right:.5rem!important;margin-right:.5rem!important;gap:.25rem!important}#online-count-text{font-size:10px}}#ypt-grid{max-width:500px;margin:0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.ypt-cell{aspect-ratio:1 / 1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border:1px solid rgba(255,255,255,.05);background-color:#ffffff05;transition:transform .2s ease,box-shadow .2s ease;cursor:default}.ypt-cell:hover{transform:translateY(-2px) scale(1.05);z-index:10;box-shadow:0 4px 15px #00000080;border-color:var(--accent-color)}.ypt-date{font-size:10px;font-weight:700;opacity:.5;position:absolute;top:4px;left:5px}.ypt-time{font-size:10px;font-weight:700;margin-top:10px;letter-spacing:-.02em}.ypt-cell.empty{background:transparent;border:none;pointer-events:none}@media(max-width:640px){#ypt-grid{max-width:100%;gap:4px}.ypt-cell{border-radius:6px}.ypt-date{font-size:8px;top:2px;left:3px}.ypt-time{font-size:8px;margin-top:8px}}#view-statistics .card,#view-calendar .card{background-color:#0c0c0ce6!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);box-shadow:0 10px 40px #000c}#quote{font-family:Roboto Slab,serif!important;font-weight:400}html.lite-mode *,html.lite-mode *:before,html.lite-mode *:after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}html.lite-mode .card,html.lite-mode .custom-card,html.lite-mode .glass-panel,html.lite-mode .modal-overlay>.card{background-color:var(--bg-color, #18181b)!important;border-color:var(--border-color, #3f3f46)!important;background-image:linear-gradient(#000c,#000c)!important}html.lite-mode #view-statistics,html.lite-mode #view-calendar,html.lite-mode #main-dashboard,html.lite-mode .tab-content-container{background-color:transparent!important;background-image:none!important;border:none!important}.selection\:bg-indigo-500\/30 *::-moz-selection{background-color:#6366f14d}.selection\:bg-indigo-500\/30 *::selection{background-color:#6366f14d}.selection\:bg-indigo-500\/30::-moz-selection{background-color:#6366f14d}.selection\:bg-indigo-500\/30::selection{background-color:#6366f14d}.hover\:border-blue-500:hover{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.hover\:border-gray-300:hover{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.hover\:border-gray-500:hover{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1))}.hover\:border-gray-600:hover{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.hover\:border-green-500:hover{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.hover\:border-indigo-500\/50:hover{border-color:#6366f180}.hover\:border-red-500:hover{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.hover\:border-red-500\/50:hover{border-color:#ef444480}.hover\:border-white:hover{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.hover\:border-white\/20:hover{border-color:#fff3}.hover\:bg-\[var\(--accent-color\)\]:hover{background-color:var(--accent-color)}.hover\:bg-blue-900\/40:hover{background-color:#1e3a8a66}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-600:hover{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-600\/60:hover{background-color:#4b556399}.hover\:bg-gray-700:hover{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-700\/50:hover{background-color:#37415180}.hover\:bg-gray-700\/70:hover{background-color:#374151b3}.hover\:bg-green-800:hover{--tw-bg-opacity: 1;background-color:rgb(22 101 52 / var(--tw-bg-opacity, 1))}.hover\:bg-green-900\/40:hover{background-color:#14532d66}.hover\:bg-indigo-500:hover{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-700:hover{--tw-bg-opacity: 1;background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))}.hover\:bg-purple-700:hover{--tw-bg-opacity: 1;background-color:rgb(126 34 206 / var(--tw-bg-opacity, 1))}.hover\:bg-red-500\/20:hover{background-color:#ef444433}.hover\:bg-red-600:hover{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.hover\:bg-red-700:hover{--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity, 1))}.hover\:bg-red-800:hover{--tw-bg-opacity: 1;background-color:rgb(153 27 27 / var(--tw-bg-opacity, 1))}.hover\:bg-red-900\/30:hover{background-color:#7f1d1d4d}.hover\:bg-sky-700:hover{--tw-bg-opacity: 1;background-color:rgb(3 105 161 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/10:hover{background-color:#ffffff1a}.hover\:bg-white\/20:hover{background-color:#fff3}.hover\:bg-white\/5:hover{background-color:#ffffff0d}.hover\:bg-yellow-700:hover{--tw-bg-opacity: 1;background-color:rgb(161 98 7 / var(--tw-bg-opacity, 1))}.hover\:text-\[var\(--accent-color\)\]:hover{color:var(--accent-color)}.hover\:text-blue-400:hover{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.hover\:text-indigo-400:hover{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.hover\:text-red-300:hover{--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.hover\:text-red-400:hover{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.hover\:text-red-500:hover{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:opacity-100:hover{opacity:1}.hover\:opacity-80:hover{opacity:.8}.hover\:brightness-125:hover{--tw-brightness: brightness(1.25);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\:border-red-500:focus{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.focus\:bg-black\/40:focus{background-color:#0006}.focus\:placeholder-gray-400:focus::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.focus\:placeholder-gray-400:focus::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-\[var\(--accent-color\)\]:focus{--tw-ring-color: var(--accent-color)}.focus\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.active\:scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:cursor-grabbing:active{cursor:grabbing}.group:hover .group-hover\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:border-\[var\(--border-color\)\]{border-color:var(--border-color)}.group:hover .group-hover\:border-green-400{--tw-border-opacity: 1;border-color:rgb(74 222 128 / var(--tw-border-opacity, 1))}.group:hover .group-hover\:bg-green-400\/20{background-color:#4ade8033}.group:hover .group-hover\:text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.group\/log:hover .group-hover\/log\:opacity-100,.group\/sub:hover .group-hover\/sub\:opacity-100,.group:hover .group-hover\:opacity-100{opacity:1}@media(min-width:640px){.sm\:not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media(min-width:768px){.md\:absolute{position:absolute}.md\:left-1\/2{left:50%}.md\:col-span-2{grid-column:span 2 / span 2}.md\:col-span-3{grid-column:span 3 / span 3}.md\:ml-0{margin-left:0}.md\:mt-0{margin-top:0}.md\:block{display:block}.md\:h-\[calc\(100vh-140px\)\]{height:calc(100vh - 140px)}.md\:w-56{width:14rem}.md\:w-auto{width:auto}.md\:-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.md\:overflow-y-auto{overflow-y:auto}.md\:p-12{padding:3rem}.md\:p-20{padding:5rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-\[10rem\]{font-size:10rem}.md\:text-\[8rem\]{font-size:8rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media(min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
diff --git a/docs/assets/main-DZNOAHNq.js b/docs/assets/main-CDlbpbEp.js
similarity index 88%
rename from docs/assets/main-DZNOAHNq.js
rename to docs/assets/main-CDlbpbEp.js
index 8b7b13d..4392563 100644
--- a/docs/assets/main-DZNOAHNq.js
+++ b/docs/assets/main-CDlbpbEp.js
@@ -198,7 +198,7 @@
                     <div class="flex items-center gap-2">
                         <span class="font-semibold text-[var(--accent-color)]">${ie(f)}</span>
                         <button data-subject="${p}" class="delete-log-item text-gray-500 hover:text-red-400 opacity-0 group-hover/log:opacity-100 transition-opacity">×</button>
-                    </div>`,c.appendChild(w)})}}};function C(){Object.values(o.chartInstances).forEach(s=>s.destroy()),o.chartInstances={},i.dashboardGrid.innerHTML="";const e=o.customCards.map(s=>s.id);Array.isArray(o.layout)||(o.layout=["countdown","graph","default-todo","default-study-logger","default-note","default-line-graph","tests","quote","time"]);const t=o.layout.length;o.layout=o.layout.filter(s=>y[s]?.isDefault||e.includes(s)),o.layout.length,o.customCards.forEach(s=>{o.layout.includes(s.id)||o.layout.push(s.id)}),Ye(),o.save("layout"),o.layout.forEach(s=>{const n=o.customCards.find(l=>l.id===s),a=n?n.type:s,r=y[a];if(r){const l=document.getElementById(r.templateId).content.cloneNode(!0),d=l.querySelector(".card");d.dataset.cardId=s;const c=o.cardProps[s]||{colspan:a==="graph"||a==="line-graph"||a==="youtube"||a==="time-logger"?2:1};if(o.cardProps[s]=c,c.colspan===2&&d.classList.add("md:col-span-2"),n)d.querySelector(".card-title").textContent=n.title;else if(o.settings.theme==="chaitanya-noob"){const u=d.querySelector("h2");u&&(u.textContent+=" 🤓")}i.dashboardGrid.appendChild(l)}}),i.dashboardGrid.querySelectorAll(".card").forEach((s,n)=>{const a=s.dataset.cardId,r=o.customCards.find(c=>c.id===a),l=r?r.type:a,d=y[l];d&&d.render&&d.render(s,r)})}function Le(){const e=o.settings.youtubeTintEnabled,t=o.settings.youtubeBlurEnabled;i.inputs.youtubeTintToggle&&(i.inputs.youtubeTintToggle.checked=e),i.inputs.youtubeBlurToggle&&(i.inputs.youtubeBlurToggle.checked=t),document.querySelectorAll('[data-card-type="youtube"] .youtube-container').forEach(s=>{s.classList.toggle("tint-disabled",!e),s.classList.toggle("blurred",t)})}function F(){document.documentElement.dataset.theme=o.settings.theme;const e=["cyberpunk","god-mode"].includes(o.settings.theme)?o.settings.theme:"";document.documentElement.dataset.subTheme=e,i.body.style.fontFamily=o.settings.font,o.settings.theme==="alakh-pandey"?i.body.style.backgroundImage="url(https://i.imgflip.com/8otyfs.jpg)":o.settings.theme==="chaitanya-noob"?i.body.style.backgroundImage="url(https://i.ibb.co/pv4BYhMs/Whats-App-Image-2025-08-06-at-16-12-41-4f47e159.jpg)":o.settings.theme==="god-mode"?i.body.style.backgroundImage="url('https://i.pinimg.com/originals/c5/9a/d2/c59ad2bd4ad2fbacd04017debc679ddb.gif')":i.body.style.backgroundImage=o.settings.bgUrl?`url(${o.settings.bgUrl})`:"none";const t=o.settings.jeeSession||"April",s=o.settings.examYear||"2026";i.inputs.jeeSession&&i.inputs.jeeSession.options.length===0&&["January","April"].forEach(c=>{const u=document.createElement("option");u.value=c,u.textContent=c,i.inputs.jeeSession.appendChild(u)}),i.inputs.jeeSession.value=t;const n=O.JEE[t]?.[s]||"";i.inputs.customName.value=o.settings.customExamName||"",i.inputs.customDate.value=o.settings.customExamDate||"",i.inputs.jeeShift.value=o.settings.jeeShiftDate||n,o.settings.examType==="JEE"?(i.inputs.jeeContainer.classList.remove("hidden"),i.inputs.customContainer.classList.add("hidden")):o.settings.examType==="Custom"?(i.inputs.jeeContainer.classList.add("hidden"),i.inputs.customContainer.classList.remove("hidden")):(i.inputs.jeeContainer.classList.add("hidden"),i.inputs.customContainer.classList.add("hidden"));const{examType:a,examYear:r,customExamName:l}=o.settings;let d;a==="Custom"?d=l||"My Exam":d=`${a} ${r}`,i.mainTitle.textContent=d,i.mainTitleRiced.textContent=d,i.inputs.tickingSoundToggle.checked=o.settings.tickingSoundEnabled,i.inputs.theme.value=o.settings.theme,i.inputs.font.value=o.settings.font,i.inputs.bgUrl.value=o.settings.bgUrl,i.inputs.examType.value=o.settings.examType,i.inputs.examYear.value=o.settings.examYear,i.inputs.focusShieldToggle.checked=o.settings.focusShieldEnabled,Le(),o.settings.liteModeEnabled?document.documentElement.classList.add("lite-mode"):document.documentElement.classList.remove("lite-mode"),i.inputs.liteModeToggle&&(i.inputs.liteModeToggle.checked=o.settings.liteModeEnabled),o.settings.ricedModeEnabled=!1,document.documentElement.dataset.ricedMode="false",i.inputs.ricedModeToggle&&(i.inputs.ricedModeToggle.checked=!1),o.settings.streamlinedModeEnabled=!1,document.documentElement.dataset.streamlinedMode="false",i.inputs.streamlinedModeToggle&&(i.inputs.streamlinedModeToggle.checked=!1),o.saveSettings()}i.dashboardGrid.addEventListener("click",e=>{const t=e.target.closest(".card");if(!t)return;const s=t.dataset.cardId;if(s==="quote"){if((e.target.closest(".refresh-quote-btn")||e.target.closest("#quote-card-content"))&&y.quote.render){const r=e.target.closest(".refresh-quote-btn");r&&(r.querySelector("svg").style.transition="transform 0.5s",r.querySelector("svg").style.transform="rotate(180deg)",setTimeout(()=>r.querySelector("svg").style.transform="rotate(0deg)",500)),y.quote.render(t)}if(e.target.closest(".copy-quote-btn")){const r=t.querySelector("#quote").textContent,l=t.querySelector("#author").textContent,d=`${r} ${l}`;navigator.clipboard.writeText(d).then(()=>{const c=e.target.closest(".copy-quote-btn"),u=c.innerHTML;c.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-green-400"><polyline points="20 6 9 17 4 12"></polyline></svg>',setTimeout(()=>{c.innerHTML=u},1500)})}}if(e.target.closest(".delete-test-btn")){const r=e.target.closest(".delete-test-btn").dataset.date;delete o.tests[r],o.save("tests"),C()}if(e.target.classList.contains("day")){const r=e.target.dataset.date;if(o.tests[r])delete o.tests[r],o.save("tests"),C();else{const l=i.dashboardGrid.querySelector("#add-test-form");l&&(l.date.value=r,l.name.focus())}}const n=o.customCards.find(r=>r.id===s);if(e.target.closest(".toggle-colspan-btn")){const r=o.cardProps[s]||{colspan:1};r.colspan=r.colspan===2?1:2,o.cardProps[s]=r,o.save("cardProps"),C()}if(e.target.closest(".delete-card-btn")&&n&&(o.customCards=o.customCards.filter(r=>r.id!==s),delete o.cardProps[s],delete o.pomodoroState[s],delete o.timeLoggerState[s],o.save("customCards"),o.save("cardProps"),o.save("pomodoroState"),o.save("timeLoggerState"),C()),e.target.classList.contains("delete-log-item")){const r=e.target.closest(".card"),l=r.dataset.cardId,d=e.target.dataset.subject,c=R(new Date);if(o.studyLogs[c]&&o.studyLogs[c][d]!==void 0){delete o.studyLogs[c][d],Object.keys(o.studyLogs[c]).length===0&&delete o.studyLogs[c],o.save("studyLogs");const u=o.customCards.find(g=>g.id===l);y["time-logger"].render(r,u)}}if(n&&n.type==="todo"){const r=e.target.closest("li");if(r){const l=parseInt(r.dataset.index),d=n.content[l];if(e.target.closest(".status-btn")){const c=["todo","in-progress","done"],u=c.indexOf(d.status||"todo");d.status=c[(u+1)%3],d.completed=d.status==="done",o.save("customCards"),y.todo.render(t,n)}else if(e.target.closest(".priority-btn")){const c=["medium","high","low"],u=c.indexOf(d.priority||"medium");d.priority=c[(u+1)%3],o.save("customCards"),y.todo.render(t,n)}else if(e.target.closest(".toggle-expand-btn"))d.expanded=!d.expanded,o.save("customCards"),y.todo.render(t,n);else if(e.target.closest(".toggle-subtask-btn")){const c=parseInt(e.target.closest(".toggle-subtask-btn").dataset.subIndex);d.subtasks[c]&&(d.subtasks[c].completed=!d.subtasks[c].completed,o.save("customCards"),y.todo.render(t,n))}else if(e.target.closest(".delete-subtask-btn")){const c=parseInt(e.target.closest(".delete-subtask-btn").dataset.subIndex);d.subtasks.splice(c,1),o.save("customCards"),y.todo.render(t,n)}else e.target.closest(".delete-todo-item")&&(n.content.splice(l,1),o.save("customCards"),y.todo.render(t,n))}}if(e.target.closest(".pip-btn")){const r=o.customCards.find(l=>l.id===s);r&&r.type==="time-logger"&&At(s,r.type)}if(n&&n.type==="todo"){const r=e.target.closest(".todo-item");if(r){const l=parseInt(r.dataset.index);e.target.closest(".delete-todo-item")?n.content.splice(l,1):e.target.classList.contains("todo-checkbox")&&(n.content[l].completed=!n.content[l].completed),o.save("customCards"),y.todo.render(t,n)}}if(e.target.closest(".toggle-daily-task")){const r=e.target.closest(".toggle-daily-task"),l=parseInt(r.dataset.index),d=e.target.closest(".card"),c=d.dataset.cardId,u=o.customCards.find(m=>m.id===c),g=d.querySelector(".daily-date-selector").value;u&&u.content[g]&&(u.content[g][l].completed=!u.content[g][l].completed,o.save("customCards"),y["daily-tasks"].render(d,u))}if(e.target.closest(".prev-day-btn")||e.target.closest(".next-day-btn")){const r=t.querySelector(".daily-date-selector"),l=new Date(r.value||new Date),d=e.target.closest(".prev-day-btn")?-1:1;l.setDate(l.getDate()+d);const c=l.toISOString().split("T")[0];r.value=c,t.dataset.selectedDate=c;const u=o.customCards.find(g=>g.id===s);y["daily-tasks"].render(t,u)}const a=o.customCards.find(r=>r.id===s);if(a&&a.type==="daily-tasks"){const r=t.querySelector(".daily-date-selector").value;a.content[r]||(a.content[r]=[]);const l=a.content[r],d=e.target.closest("li");if(d){const c=parseInt(d.dataset.index),u=l[c];if(u)if(e.target.closest(".status-btn")){const g=["todo","in-progress","done"],m=g.indexOf(u.status||"todo");u.status=g[(m+1)%3],u.completed=u.status==="done",o.save("customCards"),y["daily-tasks"].render(t,a)}else if(e.target.closest(".priority-btn")){const g=["medium","high","low"],m=g.indexOf(u.priority||"medium");u.priority=g[(m+1)%3],o.save("customCards"),y["daily-tasks"].render(t,a)}else if(e.target.closest(".toggle-expand-btn"))u.expanded=!u.expanded,o.save("customCards"),y["daily-tasks"].render(t,a);else if(e.target.closest(".toggle-subtask-btn")){const g=parseInt(e.target.closest(".toggle-subtask-btn").dataset.subIndex);u.subtasks[g]&&(u.subtasks[g].completed=!u.subtasks[g].completed,o.save("customCards"),y["daily-tasks"].render(t,a))}else if(e.target.closest(".delete-subtask-btn")){const g=parseInt(e.target.closest(".delete-subtask-btn").dataset.subIndex);u.subtasks.splice(g,1),o.save("customCards"),y["daily-tasks"].render(t,a)}else e.target.closest(".delete-daily-task")&&(l.splice(c,1),l.length===0&&delete a.content[r],o.save("customCards"),y["daily-tasks"].render(t,a))}}if(n&&n.type==="line-graph"&&e.target.closest(".delete-mark-item")){const r=parseInt(e.target.closest(".delete-mark-item").dataset.index);n.content.splice(r,1),o.save("customCards"),y["line-graph"].render(t,n)}if(e.target.closest(".toggle-manual-form")){const r=e.target.closest(".card").querySelector(".manual-log-form");r.classList.toggle("hidden");const l=e.target.closest(".toggle-manual-form").querySelector("span");r.classList.contains("hidden")?l.textContent="+ Add Manual Entry":l.textContent="- Close"}n&&n.type==="pomodoro"&&(e.target.classList.contains("pomodoro-btn")?Z.setMode(s,e.target.dataset.mode):e.target.classList.contains("start-pause-btn")?Z.toggle(s):e.target.classList.contains("reset-btn")&&Z.reset(s)),n&&n.type==="time-logger"&&(e.target.classList.contains("start-pause-btn")?window.timeLogger.toggle(s):e.target.classList.contains("log-btn")?window.timeLogger.log(s):e.target.classList.contains("reset-btn")&&window.timeLogger.reset(s))}),i.dashboardGrid.addEventListener("change",e=>{if(e.target.classList.contains("pomodoro-duration-input")){const t=e.target.closest(".card").dataset.cardId,s=e.target.dataset.mode;let n=parseInt(e.target.value);n<1&&(n=1,e.target.value=1),t&&s&&!isNaN(n)&&Z.setDuration(t,s,n)}if(e.target.classList.contains("subject-select")){const t=e.target.closest(".card").dataset.cardId;window.timeLogger.changeSubject(t,e.target.value)}if(e.target.classList.contains("daily-date-selector")){const t=e.target.closest(".card"),s=t.dataset.cardId,n=o.customCards.find(a=>a.id===s);t.dataset.selectedDate=e.target.value,y["daily-tasks"].render(t,n)}}),i.dashboardGrid.addEventListener("submit",e=>{e.preventDefault();const t=e.target,s=t.closest(".card"),n=s.dataset.cardId;if(t.id==="add-test-form"){const{date:a,name:r}=t.elements;if(a.value&&r.value.trim()){const l=a.value,d=r.value.trim();o.tests[l]?o.tests[l]=o.tests[l]+" | "+d:o.tests[l]=d,o.save("tests"),C(),t.reset()}}else if(t.classList.contains("add-todo-form")){const a=o.customCards.find(d=>d.id===n),r=t.querySelector("input"),l=r.value.trim();if(l.toLowerCase()==="coco"){K||(K={theme:o.settings.theme,customCards:JSON.parse(JSON.stringify(o.customCards)),tests:JSON.parse(JSON.stringify(o.tests)),layout:[...o.layout]}),i.godModePanel.classList.remove("hidden"),new Tone.Synth().toDestination().triggerAttackRelease("C4","0.5"),r.value="";return}if(l.toLowerCase()==="doingocmakesmeexcited"){o.settings.theme="chaitanya-noob",o.saveSettings(),F(),C(),r.value="";return}a&&l&&(Array.isArray(a.content)||(a.content=[]),a.content.push({text:l,completed:!1}),o.save("customCards"),y.todo.render(s,a),r.value="")}else if(t.classList.contains("manual-log-form")){const a=t.querySelector(".manual-subject-select").value,r=t.querySelector('input[name="minutes"]'),l=parseInt(r.value);if(a&&l>0){const d=R(new Date);o.studyLogs[d]||(o.studyLogs[d]={});const c=l*60;o.studyLogs[d][a]=(o.studyLogs[d][a]||0)+c,o.save("studyLogs"),C(),r.value="",console.log(`Added ${l} mins to ${a}`)}}else if(t.classList.contains("add-daily-task-form")){const a=o.customCards.find(u=>u.id===n),r=t.querySelector("input"),l=r.value.trim(),c=s.querySelector(".daily-date-selector").value;a&&l&&c&&((!a.content||Array.isArray(a.content))&&(a.content={}),a.content[c]||(a.content[c]=[]),a.content[c].push({text:l,completed:!1}),o.save("customCards"),y["daily-tasks"].render(s,a),r.value="")}else if(t.classList.contains("add-subtask-form")){const a=o.customCards.find(u=>u.id===n),r=t.closest("li"),l=parseInt(r.dataset.index),c=t.querySelector("input").value.trim();if(a&&c)if(a.type==="daily-tasks"){const u=s.querySelector(".daily-date-selector").value,g=a.content[u]?.[l];if(g){g.subtasks||(g.subtasks=[]),g.subtasks.push({text:c,completed:!1}),o.save("customCards"),y["daily-tasks"].render(s,a);const m=s.querySelector(`li[data-index="${l}"]`);m&&m.querySelector("input").focus()}}else{const u=a.content[l];if(u){u.subtasks||(u.subtasks=[]),u.subtasks.push({text:c,completed:!1}),o.save("customCards"),y.todo.render(s,a);const g=s.querySelector(`li[data-index="${l}"]`);if(g){const m=g.querySelector(".add-subtask-form input");m&&m.focus()}}}}else if(t.classList.contains("add-marks-form")){const a=o.customCards.find(g=>g.id===n),{name:r,phy:l,chem:d,math:c,maxMarks:u}=t.elements;if(a&&r.value.trim()&&l.value&&d.value&&c.value&&u.value){Array.isArray(a.content)||(a.content=[]);const g=parseFloat(l.value),m=parseFloat(d.value),v=parseFloat(c.value),p=g+m+v;a.content.push({name:r.value.trim(),maxMarks:parseFloat(u.value),total:p,subjects:{physics:g,chemistry:m,maths:v}}),o.save("customCards"),y["line-graph"].render(s,a),t.reset()}}else if(t.classList.contains("update-youtube-form")){const a=o.customCards.find(l=>l.id===n),r=t.querySelector("input");a&&r.value.trim()&&(a.content=r.value.trim(),o.save("customCards"),y.youtube.render(s,a))}});function be(){const e=document.getElementById("subject-manager-list"),t=o.settings.userSubjects||[];if(e.innerHTML="",t.length===0){e.innerHTML='<span class="text-xs text-gray-500 italic p-1">No custom subjects added.</span>';return}t.forEach((s,n)=>{const a=document.createElement("div");a.className="subject-chip",a.innerHTML=`
+                    </div>`,c.appendChild(w)})}}};function C(){Object.values(o.chartInstances).forEach(s=>s.destroy()),o.chartInstances={},i.dashboardGrid.innerHTML="";const e=o.customCards.map(s=>s.id);Array.isArray(o.layout)||(o.layout=["countdown","graph","default-todo","default-study-logger","default-note","default-line-graph","tests","quote","time"]);const t=o.layout.length;o.layout=o.layout.filter(s=>y[s]?.isDefault||e.includes(s)),o.layout.length,o.customCards.forEach(s=>{o.layout.includes(s.id)||o.layout.push(s.id)}),Ye(),o.save("layout"),o.layout.forEach(s=>{const n=o.customCards.find(l=>l.id===s),a=n?n.type:s,r=y[a];if(r){const l=document.getElementById(r.templateId).content.cloneNode(!0),d=l.querySelector(".card");d.dataset.cardId=s;const c=o.cardProps[s]||{colspan:a==="graph"||a==="line-graph"||a==="youtube"||a==="time-logger"?2:1};if(o.cardProps[s]=c,c.colspan===2?d.classList.add("md:col-span-2"):c.colspan===3&&d.classList.add("md:col-span-3"),n)d.querySelector(".card-title").textContent=n.title;else if(o.settings.theme==="chaitanya-noob"){const u=d.querySelector("h2");u&&(u.textContent+=" 🤓")}i.dashboardGrid.appendChild(l)}}),i.dashboardGrid.querySelectorAll(".card").forEach((s,n)=>{const a=s.dataset.cardId,r=o.customCards.find(c=>c.id===a),l=r?r.type:a,d=y[l];d&&d.render&&d.render(s,r)})}function Le(){const e=o.settings.youtubeTintEnabled,t=o.settings.youtubeBlurEnabled;i.inputs.youtubeTintToggle&&(i.inputs.youtubeTintToggle.checked=e),i.inputs.youtubeBlurToggle&&(i.inputs.youtubeBlurToggle.checked=t),document.querySelectorAll('[data-card-type="youtube"] .youtube-container').forEach(s=>{s.classList.toggle("tint-disabled",!e),s.classList.toggle("blurred",t)})}function F(){document.documentElement.dataset.theme=o.settings.theme;const e=["cyberpunk","god-mode"].includes(o.settings.theme)?o.settings.theme:"";document.documentElement.dataset.subTheme=e,i.body.style.fontFamily=o.settings.font,o.settings.theme==="alakh-pandey"?i.body.style.backgroundImage="url(https://i.imgflip.com/8otyfs.jpg)":o.settings.theme==="chaitanya-noob"?i.body.style.backgroundImage="url(https://i.ibb.co/pv4BYhMs/Whats-App-Image-2025-08-06-at-16-12-41-4f47e159.jpg)":o.settings.theme==="god-mode"?i.body.style.backgroundImage="url('https://i.pinimg.com/originals/c5/9a/d2/c59ad2bd4ad2fbacd04017debc679ddb.gif')":i.body.style.backgroundImage=o.settings.bgUrl?`url(${o.settings.bgUrl})`:"none";const t=o.settings.jeeSession||"April",s=o.settings.examYear||"2026";i.inputs.jeeSession&&i.inputs.jeeSession.options.length===0&&["January","April"].forEach(c=>{const u=document.createElement("option");u.value=c,u.textContent=c,i.inputs.jeeSession.appendChild(u)}),i.inputs.jeeSession.value=t;const n=O.JEE[t]?.[s]||"";i.inputs.customName.value=o.settings.customExamName||"",i.inputs.customDate.value=o.settings.customExamDate||"",i.inputs.jeeShift.value=o.settings.jeeShiftDate||n,o.settings.examType==="JEE"?(i.inputs.jeeContainer.classList.remove("hidden"),i.inputs.customContainer.classList.add("hidden")):o.settings.examType==="Custom"?(i.inputs.jeeContainer.classList.add("hidden"),i.inputs.customContainer.classList.remove("hidden")):(i.inputs.jeeContainer.classList.add("hidden"),i.inputs.customContainer.classList.add("hidden"));const{examType:a,examYear:r,customExamName:l}=o.settings;let d;a==="Custom"?d=l||"My Exam":d=`${a} ${r}`,i.mainTitle.textContent=d,i.mainTitleRiced.textContent=d,i.inputs.tickingSoundToggle.checked=o.settings.tickingSoundEnabled,i.inputs.theme.value=o.settings.theme,i.inputs.font.value=o.settings.font,i.inputs.bgUrl.value=o.settings.bgUrl,i.inputs.examType.value=o.settings.examType,i.inputs.examYear.value=o.settings.examYear,i.inputs.focusShieldToggle.checked=o.settings.focusShieldEnabled,Le(),o.settings.liteModeEnabled?document.documentElement.classList.add("lite-mode"):document.documentElement.classList.remove("lite-mode"),i.inputs.liteModeToggle&&(i.inputs.liteModeToggle.checked=o.settings.liteModeEnabled),o.settings.ricedModeEnabled=!1,document.documentElement.dataset.ricedMode="false",i.inputs.ricedModeToggle&&(i.inputs.ricedModeToggle.checked=!1),o.settings.streamlinedModeEnabled=!1,document.documentElement.dataset.streamlinedMode="false",i.inputs.streamlinedModeToggle&&(i.inputs.streamlinedModeToggle.checked=!1),o.saveSettings()}i.dashboardGrid.addEventListener("click",e=>{const t=e.target.closest(".card");if(!t)return;const s=t.dataset.cardId;if(s==="quote"){if((e.target.closest(".refresh-quote-btn")||e.target.closest("#quote-card-content"))&&y.quote.render){const r=e.target.closest(".refresh-quote-btn");r&&(r.querySelector("svg").style.transition="transform 0.5s",r.querySelector("svg").style.transform="rotate(180deg)",setTimeout(()=>r.querySelector("svg").style.transform="rotate(0deg)",500)),y.quote.render(t)}if(e.target.closest(".copy-quote-btn")){const r=t.querySelector("#quote").textContent,l=t.querySelector("#author").textContent,d=`${r} ${l}`;navigator.clipboard.writeText(d).then(()=>{const c=e.target.closest(".copy-quote-btn"),u=c.innerHTML;c.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-green-400"><polyline points="20 6 9 17 4 12"></polyline></svg>',setTimeout(()=>{c.innerHTML=u},1500)})}}if(e.target.closest(".delete-test-btn")){const r=e.target.closest(".delete-test-btn").dataset.date;delete o.tests[r],o.save("tests"),C()}if(e.target.classList.contains("day")){const r=e.target.dataset.date;if(o.tests[r])delete o.tests[r],o.save("tests"),C();else{const l=i.dashboardGrid.querySelector("#add-test-form");l&&(l.date.value=r,l.name.focus())}}const n=o.customCards.find(r=>r.id===s);if(e.target.closest(".toggle-colspan-btn")){const r=o.cardProps[s]||{colspan:1};r.colspan=r.colspan===2?1:2,o.cardProps[s]=r,o.save("cardProps"),C()}if(e.target.closest(".toggle-fullwidth-btn")){const r=o.cardProps[s]||{colspan:1};r.colspan=r.colspan===3?1:3,o.cardProps[s]=r,o.save("cardProps"),C()}if(e.target.closest(".delete-card-btn")&&n&&(o.customCards=o.customCards.filter(r=>r.id!==s),delete o.cardProps[s],delete o.pomodoroState[s],delete o.timeLoggerState[s],o.save("customCards"),o.save("cardProps"),o.save("pomodoroState"),o.save("timeLoggerState"),C()),e.target.classList.contains("delete-log-item")){const r=e.target.closest(".card"),l=r.dataset.cardId,d=e.target.dataset.subject,c=R(new Date);if(o.studyLogs[c]&&o.studyLogs[c][d]!==void 0){delete o.studyLogs[c][d],Object.keys(o.studyLogs[c]).length===0&&delete o.studyLogs[c],o.save("studyLogs");const u=o.customCards.find(g=>g.id===l);y["time-logger"].render(r,u)}}if(n&&n.type==="todo"){const r=e.target.closest("li");if(r){const l=parseInt(r.dataset.index),d=n.content[l];if(e.target.closest(".status-btn")){const c=["todo","in-progress","done"],u=c.indexOf(d.status||"todo");d.status=c[(u+1)%3],d.completed=d.status==="done",o.save("customCards"),y.todo.render(t,n)}else if(e.target.closest(".priority-btn")){const c=["medium","high","low"],u=c.indexOf(d.priority||"medium");d.priority=c[(u+1)%3],o.save("customCards"),y.todo.render(t,n)}else if(e.target.closest(".toggle-expand-btn"))d.expanded=!d.expanded,o.save("customCards"),y.todo.render(t,n);else if(e.target.closest(".toggle-subtask-btn")){const c=parseInt(e.target.closest(".toggle-subtask-btn").dataset.subIndex);d.subtasks[c]&&(d.subtasks[c].completed=!d.subtasks[c].completed,o.save("customCards"),y.todo.render(t,n))}else if(e.target.closest(".delete-subtask-btn")){const c=parseInt(e.target.closest(".delete-subtask-btn").dataset.subIndex);d.subtasks.splice(c,1),o.save("customCards"),y.todo.render(t,n)}else e.target.closest(".delete-todo-item")&&(n.content.splice(l,1),o.save("customCards"),y.todo.render(t,n))}}if(e.target.closest(".pip-btn")){const r=o.customCards.find(l=>l.id===s);r&&r.type==="time-logger"&&At(s,r.type)}if(n&&n.type==="todo"){const r=e.target.closest(".todo-item");if(r){const l=parseInt(r.dataset.index);e.target.closest(".delete-todo-item")?n.content.splice(l,1):e.target.classList.contains("todo-checkbox")&&(n.content[l].completed=!n.content[l].completed),o.save("customCards"),y.todo.render(t,n)}}if(e.target.closest(".toggle-daily-task")){const r=e.target.closest(".toggle-daily-task"),l=parseInt(r.dataset.index),d=e.target.closest(".card"),c=d.dataset.cardId,u=o.customCards.find(m=>m.id===c),g=d.querySelector(".daily-date-selector").value;u&&u.content[g]&&(u.content[g][l].completed=!u.content[g][l].completed,o.save("customCards"),y["daily-tasks"].render(d,u))}if(e.target.closest(".prev-day-btn")||e.target.closest(".next-day-btn")){const r=t.querySelector(".daily-date-selector"),l=new Date(r.value||new Date),d=e.target.closest(".prev-day-btn")?-1:1;l.setDate(l.getDate()+d);const c=l.toISOString().split("T")[0];r.value=c,t.dataset.selectedDate=c;const u=o.customCards.find(g=>g.id===s);y["daily-tasks"].render(t,u)}const a=o.customCards.find(r=>r.id===s);if(a&&a.type==="daily-tasks"){const r=t.querySelector(".daily-date-selector").value;a.content[r]||(a.content[r]=[]);const l=a.content[r],d=e.target.closest("li");if(d){const c=parseInt(d.dataset.index),u=l[c];if(u)if(e.target.closest(".status-btn")){const g=["todo","in-progress","done"],m=g.indexOf(u.status||"todo");u.status=g[(m+1)%3],u.completed=u.status==="done",o.save("customCards"),y["daily-tasks"].render(t,a)}else if(e.target.closest(".priority-btn")){const g=["medium","high","low"],m=g.indexOf(u.priority||"medium");u.priority=g[(m+1)%3],o.save("customCards"),y["daily-tasks"].render(t,a)}else if(e.target.closest(".toggle-expand-btn"))u.expanded=!u.expanded,o.save("customCards"),y["daily-tasks"].render(t,a);else if(e.target.closest(".toggle-subtask-btn")){const g=parseInt(e.target.closest(".toggle-subtask-btn").dataset.subIndex);u.subtasks[g]&&(u.subtasks[g].completed=!u.subtasks[g].completed,o.save("customCards"),y["daily-tasks"].render(t,a))}else if(e.target.closest(".delete-subtask-btn")){const g=parseInt(e.target.closest(".delete-subtask-btn").dataset.subIndex);u.subtasks.splice(g,1),o.save("customCards"),y["daily-tasks"].render(t,a)}else e.target.closest(".delete-daily-task")&&(l.splice(c,1),l.length===0&&delete a.content[r],o.save("customCards"),y["daily-tasks"].render(t,a))}}if(n&&n.type==="line-graph"&&e.target.closest(".delete-mark-item")){const r=parseInt(e.target.closest(".delete-mark-item").dataset.index);n.content.splice(r,1),o.save("customCards"),y["line-graph"].render(t,n)}if(e.target.closest(".toggle-manual-form")){const r=e.target.closest(".card").querySelector(".manual-log-form");r.classList.toggle("hidden");const l=e.target.closest(".toggle-manual-form").querySelector("span");r.classList.contains("hidden")?l.textContent="+ Add Manual Entry":l.textContent="- Close"}n&&n.type==="pomodoro"&&(e.target.classList.contains("pomodoro-btn")?Z.setMode(s,e.target.dataset.mode):e.target.classList.contains("start-pause-btn")?Z.toggle(s):e.target.classList.contains("reset-btn")&&Z.reset(s)),n&&n.type==="time-logger"&&(e.target.classList.contains("start-pause-btn")?window.timeLogger.toggle(s):e.target.classList.contains("log-btn")?window.timeLogger.log(s):e.target.classList.contains("reset-btn")&&window.timeLogger.reset(s))}),i.dashboardGrid.addEventListener("change",e=>{if(e.target.classList.contains("pomodoro-duration-input")){const t=e.target.closest(".card").dataset.cardId,s=e.target.dataset.mode;let n=parseInt(e.target.value);n<1&&(n=1,e.target.value=1),t&&s&&!isNaN(n)&&Z.setDuration(t,s,n)}if(e.target.classList.contains("subject-select")){const t=e.target.closest(".card").dataset.cardId;window.timeLogger.changeSubject(t,e.target.value)}if(e.target.classList.contains("daily-date-selector")){const t=e.target.closest(".card"),s=t.dataset.cardId,n=o.customCards.find(a=>a.id===s);t.dataset.selectedDate=e.target.value,y["daily-tasks"].render(t,n)}}),i.dashboardGrid.addEventListener("submit",e=>{e.preventDefault();const t=e.target,s=t.closest(".card"),n=s.dataset.cardId;if(t.id==="add-test-form"){const{date:a,name:r}=t.elements;if(a.value&&r.value.trim()){const l=a.value,d=r.value.trim();o.tests[l]?o.tests[l]=o.tests[l]+" | "+d:o.tests[l]=d,o.save("tests"),C(),t.reset()}}else if(t.classList.contains("add-todo-form")){const a=o.customCards.find(d=>d.id===n),r=t.querySelector("input"),l=r.value.trim();if(l.toLowerCase()==="coco"){K||(K={theme:o.settings.theme,customCards:JSON.parse(JSON.stringify(o.customCards)),tests:JSON.parse(JSON.stringify(o.tests)),layout:[...o.layout]}),i.godModePanel.classList.remove("hidden"),new Tone.Synth().toDestination().triggerAttackRelease("C4","0.5"),r.value="";return}if(l.toLowerCase()==="doingocmakesmeexcited"){o.settings.theme="chaitanya-noob",o.saveSettings(),F(),C(),r.value="";return}a&&l&&(Array.isArray(a.content)||(a.content=[]),a.content.push({text:l,completed:!1}),o.save("customCards"),y.todo.render(s,a),r.value="")}else if(t.classList.contains("manual-log-form")){const a=t.querySelector(".manual-subject-select").value,r=t.querySelector('input[name="minutes"]'),l=parseInt(r.value);if(a&&l>0){const d=R(new Date);o.studyLogs[d]||(o.studyLogs[d]={});const c=l*60;o.studyLogs[d][a]=(o.studyLogs[d][a]||0)+c,o.save("studyLogs"),C(),r.value="",console.log(`Added ${l} mins to ${a}`)}}else if(t.classList.contains("add-daily-task-form")){const a=o.customCards.find(u=>u.id===n),r=t.querySelector("input"),l=r.value.trim(),c=s.querySelector(".daily-date-selector").value;a&&l&&c&&((!a.content||Array.isArray(a.content))&&(a.content={}),a.content[c]||(a.content[c]=[]),a.content[c].push({text:l,completed:!1}),o.save("customCards"),y["daily-tasks"].render(s,a),r.value="")}else if(t.classList.contains("add-subtask-form")){const a=o.customCards.find(u=>u.id===n),r=t.closest("li"),l=parseInt(r.dataset.index),c=t.querySelector("input").value.trim();if(a&&c)if(a.type==="daily-tasks"){const u=s.querySelector(".daily-date-selector").value,g=a.content[u]?.[l];if(g){g.subtasks||(g.subtasks=[]),g.subtasks.push({text:c,completed:!1}),o.save("customCards"),y["daily-tasks"].render(s,a);const m=s.querySelector(`li[data-index="${l}"]`);m&&m.querySelector("input").focus()}}else{const u=a.content[l];if(u){u.subtasks||(u.subtasks=[]),u.subtasks.push({text:c,completed:!1}),o.save("customCards"),y.todo.render(s,a);const g=s.querySelector(`li[data-index="${l}"]`);if(g){const m=g.querySelector(".add-subtask-form input");m&&m.focus()}}}}else if(t.classList.contains("add-marks-form")){const a=o.customCards.find(g=>g.id===n),{name:r,phy:l,chem:d,math:c,maxMarks:u}=t.elements;if(a&&r.value.trim()&&l.value&&d.value&&c.value&&u.value){Array.isArray(a.content)||(a.content=[]);const g=parseFloat(l.value),m=parseFloat(d.value),v=parseFloat(c.value),p=g+m+v;a.content.push({name:r.value.trim(),maxMarks:parseFloat(u.value),total:p,subjects:{physics:g,chemistry:m,maths:v}}),o.save("customCards"),y["line-graph"].render(s,a),t.reset()}}else if(t.classList.contains("update-youtube-form")){const a=o.customCards.find(l=>l.id===n),r=t.querySelector("input");a&&r.value.trim()&&(a.content=r.value.trim(),o.save("customCards"),y.youtube.render(s,a))}});function be(){const e=document.getElementById("subject-manager-list"),t=o.settings.userSubjects||[];if(e.innerHTML="",t.length===0){e.innerHTML='<span class="text-xs text-gray-500 italic p-1">No custom subjects added.</span>';return}t.forEach((s,n)=>{const a=document.createElement("div");a.className="subject-chip",a.innerHTML=`
             <span>${s}</span>
             <button class="delete-subject-btn" data-index="${n}" title="Remove ${s}">✕</button>
         `,e.appendChild(a)})}function _e(){const e=document.getElementById("new-subject-input"),t=e.value.trim();if(t){if(o.settings.userSubjects||(o.settings.userSubjects=[]),o.settings.userSubjects.includes(t)){alert("Subject already exists!");return}o.settings.userSubjects.push(t),e.value="",o.saveSettings(),be(),C()}}function qt(e){o.settings.userSubjects&&o.settings.userSubjects[e]&&(o.settings.userSubjects.splice(e,1),o.saveSettings(),be(),C())}async function At(e,t){if("documentPictureInPicture"in window){P&&P.close();try{const s={width:320,height:155};P=await documentPictureInPicture.requestWindow(s),_=e,Fe=t,[...document.styleSheets].forEach(v=>{if(v.href){const p=document.createElement("link");p.rel="stylesheet",p.href=v.href,P.document.head.appendChild(p)}else if(v.ownerNode){const p=v.ownerNode.cloneNode(!0);P.document.head.appendChild(p)}});const a=document.createElement("style");a.textContent=`
diff --git a/docs/index.html b/docs/index.html
index e519216..2c6fd63 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,39 +1,39 @@
-<!DOCTYPE html>
-
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>StudyLocus | Customizable Dashboard for JEE & NEET Prep</title>
-  <meta name="description"
-    content="A customizable dashboard for students preparing for JEE, NEET, and other competitive exams. Track your progress with a journey graph, manage tasks with to-do lists, and stay focused with a Pomodoro timer.">
-  <meta name="keywords"
-    content="JEE dashboard, NEET dashboard, study planner, exam preparation, Pomodoro timer, syllabus tracker, mock test analysis, student dashboard, JEE 2026, NEET 2026, study logger">
-
-  <meta property="og:type" content="website">
-  <meta property="og:url" content="https://sval.tech/studylocus/">
-  <meta property="og:title" content="StudyLocus | Customizable Dashboard for JEE & NEET Prep">
-  <meta property="og:description"
-    content="A customizable dashboard for students preparing for JEE, NEET, and other competitive exams. Track your progress, manage tasks, and stay focused.">
-  <meta property="og:image" content="https://i.ibb.co/5Wm282XC/logo1.png">
-
-  <meta property="twitter:card" content="summary_large_image">
-  <meta property="twitter:url" content="https://sval.tech/studylocus/">
-  <meta property="twitter:title" content="StudyLocus | Customizable Dashboard for JEE & NEET Prep">
-  <meta property="twitter:description"
-    content="A customizable dashboard for students preparing for JEE, NEET, and other competitive exams. Track your progress, manage tasks, and stay focused.">
-  <meta property="twitter:image" content="https://i.ibb.co/5Wm282XC/logo1.png">
-
-  <link rel="canonical" href="https://sval.tech/studylocus/" />
-  <link rel="icon" type="image/x-icon" href="./assets/favicon-C9Itwhn5.ico">
-
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Comic+Neue&family=Fira+Code&family=Inter:wght@400;600;700&family=Roboto+Slab&family=Poppins:wght@300;400;500;600;700&family=Oswald:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap"
-    rel="stylesheet">
-
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>StudyLocus | Customizable Dashboard for JEE & NEET Prep</title>
+  <meta name="description"
+    content="A customizable dashboard for students preparing for JEE, NEET, and other competitive exams. Track your progress with a journey graph, manage tasks with to-do lists, and stay focused with a Pomodoro timer.">
+  <meta name="keywords"
+    content="JEE dashboard, NEET dashboard, study planner, exam preparation, Pomodoro timer, syllabus tracker, mock test analysis, student dashboard, JEE 2026, NEET 2026, study logger">
+
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://sval.tech/studylocus/">
+  <meta property="og:title" content="StudyLocus | Customizable Dashboard for JEE & NEET Prep">
+  <meta property="og:description"
+    content="A customizable dashboard for students preparing for JEE, NEET, and other competitive exams. Track your progress, manage tasks, and stay focused.">
+  <meta property="og:image" content="https://i.ibb.co/5Wm282XC/logo1.png">
+
+  <meta property="twitter:card" content="summary_large_image">
+  <meta property="twitter:url" content="https://sval.tech/studylocus/">
+  <meta property="twitter:title" content="StudyLocus | Customizable Dashboard for JEE & NEET Prep">
+  <meta property="twitter:description"
+    content="A customizable dashboard for students preparing for JEE, NEET, and other competitive exams. Track your progress, manage tasks, and stay focused.">
+  <meta property="twitter:image" content="https://i.ibb.co/5Wm282XC/logo1.png">
+
+  <link rel="canonical" href="https://sval.tech/studylocus/" />
+  <link rel="icon" type="image/x-icon" href="./assets/favicon-C9Itwhn5.ico">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Comic+Neue&family=Fira+Code&family=Inter:wght@400;600;700&family=Roboto+Slab&family=Poppins:wght@300;400;500;600;700&family=Oswald:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap"
+    rel="stylesheet">
+
   <style>
     /* FORCE Tutorial on top of everything */
     .driver-popover.driverjs-theme {
@@ -62,2167 +62,2251 @@
     .driver-popover.driverjs-theme button:hover {
       background-color: var(--accent-color, #6366f1);
     }
-  </style>
-  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js"></script>
-
-  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
-  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
-  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
-  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" />
-  <script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
-  <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@type": "SoftwareApplication",
-      "name": "StudyLocus Dashboard",
-      "applicationCategory": "EducationalApplication",
-      "operatingSystem": "Web",
-      "offers": {
-        "@type": "Offer",
-        "price": "0"
-      },
-      "author": {
-        "@type": "Person",
-        "name": "Shaurya Pratap Singh",
-        "url": "https://github.com/svalordev"
-      },
-      "description": "A customizable dashboard for students preparing for JEE, NEET, and other competitive exams. Track your progress with a journey graph, manage tasks with to-do lists, and stay focused with a Pomodoro timer."
-    }
-    </script>
-  <script type="module" crossorigin src="./assets/main-DZNOAHNq.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/main-DGg9PKhg.css">
-</head>
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-TCK0S6VC58"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag() { dataLayer.push(arguments); }
-  gtag('js', new Date());
-
-  gtag('config', 'G-TCK0S6VC58');
-</script>
-
-<body class="antialiased">
-
-  <div id="app-background" class="fixed inset-0 w-full h-full -z-50 pointer-events-none">
-  </div>
-
-  <div id="bg-overlay" class="fixed inset-0 w-full h-full -z-40 pointer-events-none"></div>
-  <!-- Riced Linux Header -->
-  <header class="top-bar">
-    <div class="top-bar-left">
-      <h1 id="main-title-riced" class="font-bold cursor-pointer"></h1>
-    </div>
-    <div class="top-bar-center header-controls">
-      <button class="customize-btn" title="Customize Dashboard" aria-label="Customize Dashboard">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="4" x2="4" y1="21" y2="14"></line>
-          <line x1="4" x2="4" y1="10" y2="3"></line>
-          <line x1="12" x2="12" y1="21" y2="12"></line>
-          <line x1="12" x2="12" y1="8" y2="3"></line>
-          <line x1="20" x2="20" y1="21" y2="16"></line>
-          <line x1="20" x2="20" y1="12" y2="3"></line>
-          <line x1="1" x2="7" y1="14" y2="14"></line>
-          <line x1="9" x2="15" y1="8" y2="8"></line>
-          <line x1="17" x2="23" y1="16" y2="16"></line>
-        </svg>
-      </button>
-      <button class="add-card-btn btn-primary" title="Add New Card" aria-label="Add New Card">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="12" y1="5" x2="12" y2="19"></line>
-          <line x1="5" y1="12" x2="19" y2="12"></line>
-        </svg>
-      </button>
-      <button class="info-btn" title="About this project" aria-label="About this project">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <circle cx="12" cy="12" r="10"></circle>
-          <path d="M12 16v-4"></path>
-          <path d="M12 8h.01"></path>
-        </svg>
-      </button>
-      <button class="zen-mode-btn" title="Enter Zen Mode" aria-label="Enter Zen Mode">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2Z"></path>
-          <path d="m9.5 16.5 4-4"></path>
-          <path d="m14.5 16.5-4-4"></path>
-          <path d="M12 8V7"></path>
-        </svg>
-      </button>
-    </div>
-
-    <div class="top-bar-right header-controls">
-      <div id="auth-container-riced"></div>
-    </div>
-  </header>
-  <div id="bg-overlay"></div>
-  <div id="sync-status-toast"></div>
-  <div class="container mx-auto px-2 sm:px-4 py-6">
-    <header class="default-header header-capsule flex flex-wrap justify-between items-center gap-y-2 relative">
-
-      <div class="flex items-center gap-3 pl-2">
-        <a href="https://sval.tech" class="hover:opacity-80 transition-opacity">
-          <span class="brand-text hidden sm:block">sval.tech</span>
-        </a>
-        <span class="hidden sm:block text-gray-600">|</span>
-        <h1 id="main-title"
-          class="text-lg sm:text-xl font-bold tracking-tight cursor-pointer hover:text-[var(--accent-color)] transition-colors">
-          JEE 2026
-        </h1>
-      </div>
-
-      <div
-        class="order-last w-full md:w-auto md:absolute md:left-1/2 md:transform md:-translate-x-1/2 flex justify-center mt-2 md:mt-0">
-        <nav class="flex p-1 bg-black/20 backdrop-blur-md rounded-full border border-white/10 shadow-inner">
-          <button
-            class="view-tab-btn active px-4 py-1.5 text-xs font-bold rounded-full transition-all text-gray-400 hover:text-white hover:bg-white/5"
-            data-target="dashboard">
-            Dashboard
-          </button>
-          <button
-            class="view-tab-btn px-4 py-1.5 text-xs font-bold rounded-full transition-all text-gray-400 hover:text-white hover:bg-white/5"
-            data-target="calendar">
-            Calendar
-          </button>
-          <button
-            class="view-tab-btn px-4 py-1.5 text-xs font-bold rounded-full transition-all text-gray-400 hover:text-white hover:bg-white/5"
-            data-target="statistics">
-            Statistics
-          </button>
-        </nav>
-      </div>
-
-      <div class="flex items-center gap-2 pr-1 ml-auto md:ml-0">
-        <div id="online-users-badge"
-          class="hidden sm:flex items-center gap-2 px-3 py-1 mr-3 rounded-full bg-green-900/20 border border-green-500/30 text-xs font-bold text-green-400">
-          <span class="relative flex h-2 w-2">
-            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
-            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
-          </span>
-          <span id="online-count-text">Loading..</span>
-        </div>
-        <div id="auth-container" class="scale-90 origin-right"></div>
-        <div class="h-4 w-px bg-white/10 mx-1 hidden sm:block"></div>
-        <div class="flex items-center gap-1.5">
-          <button class="add-card-btn capsule-btn" title="Add New Card"><svg xmlns="http://www.w3.org/2000/svg"
-              width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
-              stroke-linecap="round" stroke-linejoin="round">
-              <line x1="12" y1="5" x2="12" y2="19"></line>
-              <line x1="5" y1="12" x2="19" y2="12"></line>
-            </svg></button>
-          <button class="customize-btn capsule-btn" title="Customize"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="12" cy="12" r="3"></circle>
-              <path
-                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
-              </path>
-            </svg></button>
-          <button class="info-btn capsule-btn" title="Info"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="12" cy="12" r="10"></circle>
-              <line x1="12" y1="16" x2="12" y2="12"></line>
-              <line x1="12" y1="8" x2="12.01" y2="8"></line>
-            </svg></button>
-          <button id="static-focus-btn" class="capsule-btn" title="Super Focus Mode"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="12" cy="12" r="10" />
-              <circle cx="12" cy="12" r="3" />
-            </svg></button>
-          <button class="zen-mode-btn capsule-btn" title="Enter Zen Mode"><svg xmlns="http://www.w3.org/2000/svg"
-              width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-              stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="12" cy="12" r="10"></circle>
-              <circle cx="12" cy="12" r="4"></circle>
-              <line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line>
-              <line x1="14.83" y1="14.83" x2="19.07" y2="19.07"></line>
-              <line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line>
-              <line x1="14.83" y1="9.17" x2="18.36" y2="5.64"></line>
-              <line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line>
-            </svg></button>
-        </div>
-      </div>
-    </header>
-
-    <div id="view-container">
-
-      <div id="view-dashboard" class="view-section">
-        <main id="dashboard-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-        </main>
-      </div>
-
-      <div id="view-statistics" class="view-section glass-panel hidden animate-fade-in-down">
-        <div class="max-w-7xl mx-auto space-y-6 pb-20">
-
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div class="card rounded-2xl p-5 flex flex-col justify-center">
-              <div class="absolute right-0 top-0 p-4 opacity-10 group-hover:scale-110 transition-transform">
-                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="currentColor"
-                  class="text-orange-500">
-                  <path
-                    d="M17.657 18.657A8 8 0 0 1 6.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0 1 20 13a7.975 7.975 0 0 1-2.343 5.657z">
-                  </path>
-                </svg>
-              </div>
-              <div>
-                <div class="text-xs text-orange-400 font-bold uppercase tracking-widest mb-1">Current Streak</div>
-                <div class="text-3xl font-black text-white" id="stat-streak">0 Days</div>
-                <div class="text-[10px] text-gray-400 mt-1">Keep the fire burning!</div>
-              </div>
-            </div>
-
-            <div class="card rounded-2xl p-5 flex flex-col justify-center">
-              <div>
-                <div class="text-xs text-blue-400 font-bold uppercase tracking-widest mb-1">Consistency Score</div>
-                <div class="text-3xl font-black text-white" id="stat-consistency">0%</div>
-                <div class="text-[10px] text-gray-400 mt-1">Based on daily study variance</div>
-              </div>
-              <div
-                class="h-12 w-12 rounded-full border-4 border-blue-500/30 flex items-center justify-center text-xs font-bold text-blue-400"
-                id="stat-consistency-grade">
-                -
-              </div>
-            </div>
-
-
-
-            <div class="card rounded-2xl p-5 flex flex-col justify-center">
-              <div class="flex justify-between items-end">
-                <div>
-                  <div class="text-xs text-gray-400 font-bold uppercase tracking-widest mb-1">Total Logged</div>
-                  <div class="text-2xl font-bold text-white" id="stat-total-time">0h 0m</div>
-                </div>
-                <div class="text-right">
-                  <div class="text-xs text-gray-400 font-bold uppercase tracking-widest mb-1">Daily Avg</div>
-                  <div class="text-xl font-bold text-gray-200" id="stat-daily-avg">0h</div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-
-            <div class="card rounded-2xl p-6 flex flex-col">
-              <h3 class="text-sm font-bold text-gray-300 uppercase tracking-wider mb-4 border-b border-white/5 pb-2">
-                Study DNA (Day Analysis)
-              </h3>
-              <div class="flex-grow flex items-center justify-center min-h-[250px] relative">
-                <canvas id="stats-radar-chart"></canvas>
-              </div>
-              <p class="text-xs text-center text-gray-500 mt-4 italic" id="stat-day-persona">Analyzing your
-                schedule...</p>
-            </div>
-
-            <div class="card rounded-2xl p-6 flex flex-col">
-              <h3 class="text-sm font-bold text-gray-300 uppercase tracking-wider mb-4 border-b border-white/5 pb-2">
-                Subject Health
-              </h3>
-              <div class="flex-grow flex flex-col justify-center gap-6">
-                <div class="h-40 relative">
-                  <canvas id="stats-subject-chart"></canvas>
-                  <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
-                    <span class="text-[10px] text-gray-500">RATIO</span>
-                  </div>
-                </div>
-
-                <div class="bg-red-500/10 border border-red-500/20 rounded-lg p-3 hidden" id="neglect-container">
-                  <div class="flex items-center gap-2 mb-1">
-                    <svg class="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                    </svg>
-                    <span class="text-xs font-bold text-red-300 uppercase">Needs Attention</span>
-                  </div>
-                  <p class="text-xs text-red-200/80" id="stat-neglected-subjects">You haven't studied Chemistry in
-                    5 days.</p>
-                </div>
-              </div>
-            </div>
-
-            <div class="card rounded-2xl p-6">
-              <h3 class="text-sm font-bold text-gray-300 uppercase tracking-wider mb-4 border-b border-white/5 pb-2">
-                Test Metrics
-              </h3>
-
-              <div class="space-y-4">
-                <div class="flex items-center justify-between p-3 bg-green-500/5 border border-green-500/10 rounded-lg">
-                  <div>
-                    <div class="text-[10px] text-green-400 uppercase font-bold">Power Subject</div>
-                    <div class="text-lg font-bold text-white" id="stat-strongest-sub">-</div>
-                  </div>
-                  <div class="text-2xl font-black text-green-500/20">A+</div>
-                </div>
-
-                <div class="flex items-center justify-between p-3 bg-red-500/5 border border-red-500/10 rounded-lg">
-                  <div>
-                    <div class="text-[10px] text-red-400 uppercase font-bold">Critical Weakness</div>
-                    <div class="text-lg font-bold text-white" id="stat-weakest-sub">-</div>
-                  </div>
-                  <div class="text-2xl font-black text-red-500/20">F</div>
-                </div>
-
-                <div class="h-32 w-full mt-4">
-                  <canvas id="stats-performance-chart"></canvas>
-                </div>
-              </div>
-            </div>
-
-          </div>
-
-          <div class="card rounded-2xl p-6 mt-6">
-            <div class="flex items-center justify-between mb-4 border-b border-white/5 pb-2">
-              <h3 class="text-sm font-bold text-gray-300 uppercase tracking-wider">Monthly Focus Heatmap</h3>
-              <div class="flex items-center gap-2">
-                <button id="ypt-prev-btn"
-                  class="p-1 hover:bg-white/10 rounded text-gray-400 hover:text-white transition-colors">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="m15 18-6-6 6-6" />
-                  </svg>
-                </button>
-                <span id="ypt-month-label"
-                  class="text-sm font-bold font-mono min-w-[100px] text-center">Loading...</span>
-                <button id="ypt-next-btn"
-                  class="p-1 hover:bg-white/10 rounded text-gray-400 hover:text-white transition-colors">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="m9 18 6-6-6-6" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-
-            <div class="grid grid-cols-7 mb-2 text-center max-w-[500px] mx-auto w-full">
-              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Mon</div>
-              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Tue</div>
-              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Wed</div>
-              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Thu</div>
-              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Fri</div>
-              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Sat</div>
-              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Sun</div>
-            </div>
-
-            <div id="ypt-grid" class="grid grid-cols-7 gap-1">
-            </div>
-          </div>
-
-          <div class="card rounded-2xl p-6">
-            <h3 class="text-sm font-bold text-gray-300 uppercase tracking-wider mb-4 flex justify-between items-center">
-              <span>30-Day Momentum</span>
-              <span class="text-[10px] bg-white/10 px-2 py-1 rounded text-gray-400" id="stat-total-trend">Total:
-                0h</span>
-            </h3>
-            <div class="h-64 w-full">
-              <canvas id="stats-trend-chart"></canvas>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-      <div id="view-calendar" class="view-section hidden animate-fade-in-down h-full">
-        <div class="flex flex-col h-[600px] md:h-[calc(100vh-140px)] max-h-[900px] card rounded-2xl overflow-hidden">
-
-          <div class="flex items-center justify-between p-4 border-b border-white/10 bg-black/20">
-            <h2 class="text-xl font-bold text-white flex items-center gap-2">
-              <span id="cal-month-name">February</span>
-              <span id="cal-year-name" class="text-gray-500 font-normal">2026</span>
-            </h2>
-            <div class="flex items-center gap-1">
-              <button id="cal-prev-btn"
-                class="p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-                  stroke-linecap="round" stroke-linejoin="round">
-                  <path d="m15 18-6-6 6-6" />
-                </svg>
-              </button>
-              <button id="cal-today-btn"
-                class="px-3 py-1.5 text-xs font-bold bg-white/10 hover:bg-white/20 rounded-lg text-white transition-colors mx-1">
-                Today
-              </button>
-              <button id="cal-next-btn"
-                class="p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-                  stroke-linecap="round" stroke-linejoin="round">
-                  <path d="m9 18 6-6-6-6" />
-                </svg>
-              </button>
-            </div>
-          </div>
-
-          <div class="grid grid-cols-7 border-b border-white/10 bg-black/10">
-            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Mon</div>
-            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Tue</div>
-            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Wed</div>
-            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Thu</div>
-            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Fri</div>
-            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Sat</div>
-            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Sun</div>
-          </div>
-
-          <div id="calendar-grid" class="flex-grow grid grid-cols-7 grid-rows-5 overflow-y-auto">
-          </div>
-        </div>
-      </div>
-
-      <div id="day-editor-modal"
-        class="modal-overlay hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
-        <div
-          class="card w-full max-w-md bg-[var(--card-bg-color)] border border-[var(--border-color)] rounded-2xl shadow-2xl transform transition-all scale-100 opacity-100">
-          <div class="card-header flex justify-between items-center p-4 border-b border-white/10">
-            <h2 id="day-editor-title" class="text-lg font-bold text-white">Edit Tasks</h2>
-            <button id="close-day-editor" class="text-gray-400 hover:text-white">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M18 6 6 18" />
-                <path d="m6 6 12 12" />
-              </svg>
-            </button>
-          </div>
-          <div class="p-4">
-            <form id="day-editor-form" class="flex gap-2 mb-4">
-              <input type="text" placeholder="Add new task..." class="form-input flex-grow" required autocomplete="off">
-              <button type="submit" class="btn-primary px-4 py-2 text-sm font-bold rounded-lg">+</button>
-            </form>
-            <ul id="day-editor-list" class="space-y-2 max-h-[300px] overflow-y-auto custom-scrollbar p-1">
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <button id="exit-zen-btn"
-    class="hidden fixed top-4 right-4 bg-gray-800/50 hover:bg-gray-700/70 backdrop-blur-sm text-white font-bold p-2 rounded-full transition-colors z-50"
-    title="Exit Zen Mode" aria-label="Exit Zen Mode"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
-      stroke-linejoin="round">
-      <line x1="18" y1="6" x2="6" y2="18"></line>
-      <line x1="6" y1="6" x2="18" y2="18"></line>
-    </svg></button>
-
-  <footer class="mt-16 border-t border-zinc-800 pt-8 pb-6 text-center">
-    <div class="flex flex-wrap justify-center gap-4 mb-6">
-      <a href="termsandconditions.html" style="color: var(--accent-color);"
-        class="px-1.5 py-1.5 rounded-full bg-zinc-900 border border-zinc-800 text-[10px] text-zinc-400 uppercase tracking-wide hover:border-indigo-500/50 hover:text-indigo-400 transition-colors">
-        Terms and Conditions
-      </a>
-      <a href="privacypolicy.html" style="color: var(--accent-color);"
-        class="px-1.5 py-1.5 rounded-full bg-zinc-900 border border-zinc-800 text-[10px] text-zinc-400 uppercase tracking-wide hover:border-indigo-500/50 hover:text-indigo-400 transition-colors">
-        Privacy Policy
-      </a>
-      <a href="https://discord.gg/c8xHpTfM" style="color: var(--accent-color);" target="_blank"
-        class="px-1.5 py-1.5 rounded-full bg-zinc-900 border border-[#5865F2]/20 text-[10px] text-[#5865F2] uppercase tracking-wide hover:text-white hover:border-indigo-500/50 transition-all flex items-center gap-2">
-        <svg class="w-3 h-3 fill-current" viewBox="0 0 127.14 96.36">
-          <path
-            d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.11,77.11,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22c1.24-23.28-3.28-47.54-18.9-72.15ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
-        </svg>
-        Discord
-      </a>
-    </div>
-    <p class="text-zinc-600 text-xs">
-      Built by <a href="https://github.com/svalordev" target="_blank" style="color: var(--accent-color);" class="
-        text-zinc-400 hover:text-white transition-colors underline decoration-dotted underline-offset-4">Shaurya
-        Pratap Singh</a>
-    </p>
-
-  </footer>
-
-  <template id="countdown-template">
-    <div class="card" data-card-id="countdown">
-      <div class="card-header">
-        <h2 class="text-lg font-semibold">Countdown</h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-      <div id="countdown-timer" class="flex justify-center space-x-2 sm:space-x-4 md:space-x-8 text-center py-2">
-        <div>
-          <div data-value="days" class="font-bold">00</div>
-          <div class="text-xs sm:text-sm text-secondary">Days</div>
-        </div>
-        <div>
-          <div data-value="hours" class="font-bold">00</div>
-          <div class="text-xs sm:text-sm text-secondary">Hours</div>
-        </div>
-        <div>
-          <div data-value="minutes" class="font-bold">00</div>
-          <div class="text-xs sm:text-sm text-secondary">Minutes</div>
-        </div>
-        <!-- <div>
-                    <div data-value="seconds" class="font-bold">00</div>
-                    <div class="text-xs sm:text-sm text-secondary">Seconds</div>
-                </div> -->
-      </div>
-    </div>
-  </template>
-
-  <template id="time-template">
-    <div class="card" data-card-id="time">
-      <div class="card-header">
-        <h2 class="text-lg font-semibold">Current Time</h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-      <div class="text-center py-2">
-        <div data-value="time" class="text-3xl font-bold tracking-wider">00:00:00 AM</div>
-        <div data-value="date" class="text-sm text-secondary">Sunday, August 17, 2025</div>
-      </div>
-    </div>
-  </template>
-
-  <template id="graph-template">
-    <div class="card" data-card-id="graph">
-      <div class="card-header">
-        <h2 class="text-lg font-semibold">Journey</h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-      <div class="graph-container no-scrollbar" id="contribution-graph"></div>
-      <div class="flex justify-center flex-wrap gap-x-4 gap-y-2 mt-4 text-xs text-secondary">
-        <div class="legend-item">
-          <div class="legend-color day-future"></div><span>Future</span>
-        </div>
-        <div class="legend-item">
-          <div class="legend-color day-today"></div><span>Today</span>
-        </div>
-        <div class="legend-item">
-          <div class="legend-color day-part-test"></div><span>Test</span>
-        </div>
-        <div class="legend-item">
-          <div class="legend-color day-exam"></div><span>Exam</span>
-        </div>
-      </div>
-    </div>
-  </template>
-
-  <template id="tests-template">
-    <div class="card" data-card-id="tests">
-      <div class="card-header">
-        <h2 class="text-lg font-semibold">Test Planner</h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-      <form id="add-test-form" class="flex flex-col gap-3 mb-4">
-        <input type="date" name="date" class="form-input rounded-md p-2 w-full text-sm" required>
-        <input type="text" name="name" placeholder="Test Name" class="form-input rounded-md p-2 flex-grow text-sm"
-          required>
-        <button type="submit" class="btn-primary font-bold py-2 px-4 rounded-md transition-colors w-full text-sm">Add
-          Test</button>
-      </form>
-      <div id="test-list-container">
-        <h3 class="text-md font-semibold mb-2 border-b pb-1" style="border-color: var(--border-color);">Tests
-        </h3>
-        <ul id="test-list" class="space-y-2 max-h-48 overflow-y-auto no-scrollbar"></ul>
-      </div>
-    </div>
-  </template>
-
-  <template id="quote-template">
-    <div class="card flex flex-col h-full relative group" data-card-id="quote">
-
-      <div class="card-header">
-        <h2 class="text-lg font-semibold">Quote</h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-
-      <div id="quote-card-content"
-        class="flex-grow flex flex-col justify-center items-center text-center px-6 py-4 relative z-10">
-
-        <p id="quote"
-          class="text-lg md:text-xl leading-relaxed text-gray-200 font-serif italic mb-4 transition-opacity duration-300">
-          "Loading..."
-        </p>
-
-        <div class="w-12 h-[2px] bg-[var(--accent-color)] opacity-50 mb-4 rounded-full"></div>
-
-        <p id="author" class="text-xs font-bold uppercase tracking-widest text-gray-400">
-          ...
-        </p>
-
-      </div>
-
-      <div
-        class="absolute bottom-3 right-3 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-20">
-        <button
-          class="copy-quote-btn p-1.5 rounded bg-white/10 hover:bg-[var(--accent-color)] hover:text-white text-gray-400 transition-colors"
-          title="Copy">
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-          </svg>
-        </button>
-        <button
-          class="refresh-quote-btn p-1.5 rounded bg-white/10 hover:bg-[var(--accent-color)] hover:text-white text-gray-400 transition-colors"
-          title="New Quote">
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3" />
-          </svg>
-        </button>
-      </div>
-    </div>
-  </template>
-
-  <template id="note-card-template">
-    <div class="card custom-card" data-card-type="note">
-      <div class="card-header">
-        <h2 class="text-lg font-semibold card-title">Note</h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <button class="delete-card-btn" title="Delete card" aria-label="Delete card"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M3 6h18"></path>
-              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
-              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
-            </svg></button>
-          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-      <div class="text-sm card-content whitespace-pre-wrap"></div>
-    </div>
-  </template>
-
-  <template id="daily-tasks-template">
-    <div class="card custom-card flex flex-col h-full" data-card-type="daily-tasks">
-      <div class="card-header mb-0 flex-shrink-0">
-        <h2 class="text-lg font-semibold card-title">Daily Agenda</h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <path d="M3 6h18" />
-              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-            </svg></button>
-          <span class="drag-handle cursor-grab"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-
-      <div
-        class="flex items-center justify-between gap-2 px-3 py-2 mb-3 mt-1 bg-black/20 rounded-lg border border-white/5">
-        <button class="prev-day-btn p-1 text-gray-400 hover:text-white hover:bg-white/10 rounded transition-colors"
-          title="Previous Day">
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <path d="m15 18-6-6 6-6" />
-          </svg>
-        </button>
-
-        <input type="date"
-          class="daily-date-selector bg-transparent border-none text-xs font-bold text-center text-white focus:ring-0 cursor-pointer tracking-wide">
-
-        <button class="next-day-btn p-1 text-gray-400 hover:text-white hover:bg-white/10 rounded transition-colors"
-          title="Next Day">
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <path d="m9 18 6-6-6-6" />
-          </svg>
-        </button>
-      </div>
-
-      <div class="card-content flex flex-col flex-grow min-h-0">
-        <div class="flex items-center gap-2 mb-3 flex-shrink-0 px-1">
-          <div class="progress-container flex-grow bg-gray-700/30 rounded-full h-1.5">
-            <div
-              class="progress-bar bg-[var(--accent-color)] h-1.5 rounded-full transition-all duration-500 shadow-[0_0_10px_rgba(var(--accent-color-rgb),0.4)]"
-              style="width: 0%"></div>
-          </div>
-          <span class="progress-text text-[10px] text-gray-400 font-bold">0%</span>
-        </div>
-
-        <ul class="daily-task-list space-y-2 overflow-y-auto no-scrollbar flex-grow min-h-0 pr-1"></ul>
-
-        <form class="add-daily-task-form flex gap-2 mt-3 pt-2 border-t border-white/5 flex-shrink-0">
-          <input type="text" placeholder="Add task for this day..."
-            class="form-input rounded-md p-2 w-full text-xs bg-black/20 focus:bg-black/40 transition-colors border-none focus:ring-1 focus:ring-[var(--accent-color)]"
-            required>
-          <button type="submit"
-            class="btn-primary py-1.5 px-3 rounded-md text-xs font-bold shadow-lg hover:shadow-[var(--accent-color)]/20 transition-all">+</button>
-        </form>
-
-        <div class="text-[9px] text-gray-600 text-center mt-1 font-mono opacity-40 flex-shrink-0">
-          Click circle to toggle • Click badge to prioritize
-        </div>
-      </div>
-    </div>
-  </template>
-
-  <template id="todo-card-template">
-    <div class="card custom-card flex flex-col h-full" data-card-type="todo">
-      <div class="card-header mb-2 flex-shrink-0">
-        <h2 class="text-lg font-semibold card-title">Tasks</h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <path d="M3 6h18" />
-              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-            </svg></button>
-          <span class="drag-handle cursor-grab"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-
-      <div class="card-content flex flex-col flex-grow min-h-0">
-        <div class="flex items-center gap-2 mb-3 flex-shrink-0">
-          <div class="progress-container flex-grow bg-gray-700/30 rounded-full h-1.5">
-            <div
-              class="progress-bar bg-[var(--accent-color)] h-1.5 rounded-full transition-all duration-500 shadow-[0_0_10px_rgba(var(--accent-color-rgb),0.4)]"
-              style="width: 0%"></div>
-          </div>
-          <span class="progress-text text-[10px] text-gray-400 font-bold">0%</span>
-        </div>
-
-        <ul class="todo-list space-y-2 overflow-y-auto no-scrollbar flex-grow min-h-0 pr-1"></ul>
-
-        <form class="add-todo-form flex gap-2 mt-3 pt-2 border-t border-white/5 flex-shrink-0">
-          <input type="text" placeholder="Add new task..."
-            class="form-input rounded-md p-2 w-full text-xs bg-black/20 focus:bg-black/40 transition-colors border-none focus:ring-1 focus:ring-[var(--accent-color)]"
-            required>
-          <button type="submit"
-            class="btn-primary py-1.5 px-3 rounded-md text-xs font-bold shadow-lg hover:shadow-[var(--accent-color)]/20 transition-all">+</button>
-        </form>
-
-        <div class="text-[9px] text-gray-600 text-center mt-1 font-mono opacity-40 flex-shrink-0">
-          Click circle to toggle • Click badge to prioritize
-        </div>
-      </div>
-    </div>
-  </template>
-
-  <template id="pomodoro-card-template">
-    <div class="card custom-card" data-card-type="pomodoro">
-      <div class="card-header">
-        <h2 class="text-lg font-semibold card-title">Pomodoro</h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <button class="delete-card-btn" title="Delete card" aria-label="Delete card"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M3 6h18"></path>
-              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
-              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
-            </svg></button>
-          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-      <div class="card-content text-center">
-        <div class="flex justify-center gap-2 mb-4">
-          <button data-mode="pomodoro"
-            class="pomodoro-btn text-sm px-3 py-1 rounded-md border border-transparent hover:border-gray-500">Pomodoro</button>
-          <button data-mode="shortBreak"
-            class="pomodoro-btn text-sm px-3 py-1 rounded-md border border-transparent hover:border-gray-500">Short
-            Break</button>
-          <button data-mode="longBreak"
-            class="pomodoro-btn text-sm px-3 py-1 rounded-md border border-transparent hover:border-gray-500">Long
-            Break</button>
-        </div>
-        <div class="timer-display text-6xl font-bold my-4">25:00</div>
-        <div class="flex justify-center gap-4">
-          <button class="start-pause-btn btn-primary font-bold py-2 px-8 text-lg rounded-md">START</button>
-          <button class="reset-btn text-secondary hover:text-primary">Reset</button>
-        </div>
-        <div class="focus-status text-xs text-yellow-400 mt-2 h-4"></div>
-        <div class="pomodoro-settings mt-4 flex justify-center gap-4 items-center">
-          <label class="flex flex-col text-xs items-center">
-            Work
-            <input type="number" data-mode="pomodoro"
-              class="pomodoro-duration-input form-input w-16 text-center rounded-md p-1" min="1">
-          </label>
-          <label class="flex flex-col text-xs items-center">
-            Short
-            <input type="number" data-mode="shortBreak"
-              class="pomodoro-duration-input form-input w-16 text-center rounded-md p-1" min="1">
-          </label>
-          <label class="flex flex-col text-xs items-center">
-            Long
-            <input type="number" data-mode="longBreak"
-              class="pomodoro-duration-input form-input w-16 text-center rounded-md p-1" min="1">
-          </label>
-        </div>
-      </div>
-    </div>
-  </template>
-
-  <template id="youtube-card-template">
-    <div class="card custom-card" data-card-type="youtube">
-      <div class="card-header">
-        <h2 class="text-lg font-semibold card-title">YouTube</h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <button class="delete-card-btn" title="Delete card" aria-label="Delete card"><svg
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M3 6h18"></path>
-              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
-              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
-            </svg></button>
-          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-      <div class="card-content">
-        <div class="aspect-w-16 mb-3 youtube-container">
-          <iframe class="youtube-iframe w-full h-full" title="Embedded YouTube video player" src="" frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen></iframe>
-        </div>
-        <form class="update-youtube-form flex gap-2">
-          <label for="youtube-url-input" class="sr-only">YouTube URL</label>
-          <input type="text" id="youtube-url-input" name="url" placeholder="Paste YouTube URL..."
-            class="form-input rounded-md p-2 w-full text-sm" required>
-          <button type="submit" class="btn-primary font-bold py-2 px-3 rounded-md text-sm">Load</button>
-        </form>
-      </div>
-    </div>
-  </template>
-
-  <template id="time-logger-card-template">
-    <div class="card custom-card" data-card-type="time-logger">
-      <div class="card-header">
-        <h2 class="text-lg font-semibold card-title">Study Logger</h2>
-        <div class="card-header-controls">
-          <button class="pip-btn" title="Show in floating window">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12.75 4.75h-8.5a2 2 0 0 0-2 2v8.5a2 2 0 0 0 2 2h8.5a2 2 0 0 0 2-2v-8.5a2 2 0 0 0-2-2Z" />
-              <path d="M19.25 8.75h-8.5a2 2 0 0 1-2-2v-2.5" />
-              <path d="M17.5 15.5V14" />
-              <path d="m15 12 5 5" />
-            </svg>
-          </button>
-          <button class="toggle-colspan-btn" title="Toggle size">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg>
-          </button>
-          <button class="delete-card-btn" title="Delete card">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M3 6h18" />
-              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-            </svg>
-          </button>
-          <span class="drag-handle">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg>
-          </span>
-        </div>
-      </div>
-      <div class="card-content text-center">
-        <div class="timer-display text-5xl font-bold my-4 tabular-nums">00:00:00</div>
-        <div class="focus-status text-xs text-yellow-400 mb-2 h-4"></div>
-
-        <div class="flex flex-col sm:flex-row gap-2 mb-4 items-center justify-center">
-          <label class="text-sm text-secondary sr-only sm:not-sr-only">Subject:</label>
-          <select class="subject-select form-input rounded-md p-2 text-sm flex-grow"></select>
-        </div>
-
-        <div class="flex justify-center gap-4">
-          <button class="start-pause-btn btn-primary font-bold py-2 px-8 text-lg rounded-md">START</button>
-          <button class="log-btn btn-primary font-bold py-2 px-8 text-lg rounded-md">LOG</button>
-          <button class="reset-btn text-secondary hover:text-primary">Reset</button>
-        </div>
-
-        <p class="log-message text-red-500 text-xs mt-2 h-4"></p>
-        <div class="w-full border-t border-[var(--border-color)] my-3"></div>
-
-        <div class="flex justify-between items-center mb-2">
-          <h3 class="text-md font-semibold text-left">Today's Log</h3>
-          <span class="total-study-time text-sm font-bold text-secondary"></span>
-        </div>
-
-        <ul class="study-log-list space-y-2 max-h-32 overflow-y-auto no-scrollbar text-left text-sm"></ul>
-
-        <div class="manual-entry-container mt-4 pt-2 border-t border-gray-700/50">
-          <button
-            class="toggle-manual-form text-xs text-secondary hover:text-white flex items-center gap-1 mx-auto transition-colors">
-            <span>+ Add Manual Entry</span>
-          </button>
-          <form class="manual-log-form hidden flex flex-col gap-2 mt-2">
-            <div class="flex gap-2">
-              <select class="manual-subject-select form-input rounded p-1.5 text-xs bg-gray-800 flex-grow"
-                required></select>
-              <input type="number" name="minutes" placeholder="Mins"
-                class="form-input rounded p-1.5 text-xs w-16 bg-gray-800 text-center" min="1" required>
-              <button type="submit" class="btn-primary text-xs px-3 py-1 rounded font-bold">Add</button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  </template>
-
-
-  <template id="analytics-card-template">
-    <div class="card custom-card" data-card-type="analytics">
-      <div class="card-header">
-        <h2 class="text-lg font-semibold card-title">Study Analytics</h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <path d="M3 6h18"></path>
-              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
-              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
-            </svg></button>
-          <span class="drag-handle"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
-              fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-      <div class="card-content">
-        <div class="flex justify-center gap-2 mb-4">
-          <button data-range="7" class="range-btn text-sm px-3 py-1 rounded-md border active"
-            style="border-color: var(--accent-color); background-color: var(--accent-color); color: white;">Last
-            7 Days</button>
-          <button data-range="30"
-            class="range-btn text-sm px-3 py-1 rounded-md border border-gray-600 text-secondary hover:text-primary">Last
-            30 Days</button>
-        </div>
-        <div class="h-64 relative">
-          <canvas class="analytics-chart"></canvas>
-        </div>
-        <div class="mt-4 flex flex-wrap justify-center gap-4 text-xs text-secondary statistics-summary">
-          <!-- Stats injected here via JS -->
-        </div>
-      </div>
-    </div>
-  </template>
-
-  <template id="ambient-card-template">
-    <div class="card custom-card" data-card-type="ambient">
-      <div class="card-header">
-        <h2 class="text-lg font-semibold card-title">Soundscapes</h2>
-        <div class="card-header-controls flex items-center gap-1">
-          <button class="ambient-toggle-btn mr-1 text-gray-400 hover:text-white transition-colors"
-            title="Play/Pause All">
-            <svg class="play-icon w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <polygon points="5 3 19 12 5 21 5 3"></polygon>
-            </svg>
-            <svg class="pause-icon w-4 h-4 hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="6" y="4" width="4" height="16"></rect>
-              <rect x="14" y="4" width="4" height="16"></rect>
-            </svg>
-          </button>
-
-          <button class="toggle-colspan-btn" title="Toggle size">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg>
-          </button>
-          <button class="delete-card-btn" title="Delete card">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M3 6h18" />
-              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-            </svg>
-          </button>
-          <span class="drag-handle cursor-grab">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg>
-          </span>
-        </div>
-      </div>
-      <div class="card-content flex flex-col gap-4 py-2">
-        <div class="sound-control group">
-          <div class="flex justify-between text-xs text-secondary mb-1">
-            <span class="group-hover:text-white transition-colors">🌧️ Rain</span>
-            <span class="opacity-0 group-hover:opacity-100 transition-opacity">Pink</span>
-          </div>
-          <input type="range" data-type="pink" min="-60" max="-10" value="-60"
-            class="ambient-slider w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer">
-        </div>
-        <div class="sound-control group">
-          <div class="flex justify-between text-xs text-secondary mb-1">
-            <span class="group-hover:text-white transition-colors">⚡ Thunder</span>
-            <span class="opacity-0 group-hover:opacity-100 transition-opacity">Brown</span>
-          </div>
-          <input type="range" data-type="brown" min="-60" max="-10" value="-60"
-            class="ambient-slider w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer">
-        </div>
-        <div class="sound-control group">
-          <div class="flex justify-between text-xs text-secondary mb-1">
-            <span class="group-hover:text-white transition-colors">🌊 Stream</span>
-            <span class="opacity-0 group-hover:opacity-100 transition-opacity">White</span>
-          </div>
-          <input type="range" data-type="white" min="-60" max="-20" value="-60"
-            class="ambient-slider w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer">
-        </div>
-      </div>
-    </div>
-  </template>
-
-  <div id="add-card-modal" class="modal-overlay hidden">
-    <div class="card w-11/12 max-w-md">
-      <h2 class="text-xl font-semibold mb-4">Add New Card</h2>
-      <form id="new-card-form" class="flex flex-col h-full">
-        <input type="hidden" id="new-card-type" value="note">
-
-        <div class="flex-1 overflow-y-auto pr-2 mb-4 custom-scrollbar" style="max-height: 400px;">
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3" id="card-type-grid">
-            <div
-              class="card-option active p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
-              data-value="note">
-              <div class="flex items-center gap-2">
-                <svg class="text-blue-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
-                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-                </svg>
-                <span class="font-bold text-sm">Note</span>
-              </div>
-              <p class="text-xs text-gray-400">Simple text area for scratchpad or reminders.</p>
-            </div>
-
-            <div
-              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
-              data-value="todo">
-              <div class="flex items-center gap-2">
-                <svg class="text-green-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                  stroke-linejoin="round">
-                  <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
-                  <path d="m9 12 2 2 4-4" />
-                </svg>
-                <span class="font-bold text-sm">To-Do List</span>
-              </div>
-              <p class="text-xs text-gray-400">Task management with subtasks and priority.</p>
-            </div>
-
-            <div
-              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
-              data-value="daily-tasks">
-              <div class="flex items-center gap-2">
-                <svg class="text-purple-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                  stroke-linejoin="round">
-                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-                  <line x1="16" y1="2" x2="16" y2="6"></line>
-                  <line x1="8" y1="2" x2="8" y2="6"></line>
-                  <line x1="3" y1="10" x2="21" y2="10"></line>
-                </svg>
-                <span class="font-bold text-sm">Calendar Tasks</span>
-              </div>
-              <p class="text-xs text-gray-400">Date-specific tasks with progress tracking.</p>
-            </div>
-
-            <div
-              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
-              data-value="pomodoro">
-              <div class="flex items-center gap-2">
-                <svg class="text-red-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
-                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <circle cx="12" cy="12" r="10"></circle>
-                  <polyline points="12 6 12 12 16 14"></polyline>
-                </svg>
-                <span class="font-bold text-sm">Pomodoro</span>
-              </div>
-              <p class="text-xs text-gray-400">Focus timer with short and long breaks.</p>
-            </div>
-
-            <div
-              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
-              data-value="time-logger">
-              <div class="flex items-center gap-2">
-                <svg class="text-yellow-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                  stroke-linejoin="round">
-                  <circle cx="12" cy="12" r="10"></circle>
-                  <polyline points="12 6 12 12 16 14"></polyline>
-                </svg>
-                <span class="font-bold text-sm">Study Logger</span>
-              </div>
-              <p class="text-xs text-gray-400">Track subject-wise study hours.</p>
-            </div>
-
-            <div
-              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
-              data-value="line-graph">
-              <div class="flex items-center gap-2">
-                <svg class="text-indigo-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                  stroke-linejoin="round">
-                  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
-                </svg>
-                <span class="font-bold text-sm">Marks Graph</span>
-              </div>
-              <p class="text-xs text-gray-400">Visualize test scores and trends.</p>
-            </div>
-            <div
-              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
-              data-value="analytics">
-              <div class="flex items-center gap-2">
-                <svg class="text-cyan-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
-                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M12 20V10" />
-                  <path d="M18 20V4" />
-                  <path d="M6 20v-4" />
-                </svg>
-                <span class="font-bold text-sm">Analytics</span>
-              </div>
-              <p class="text-xs text-gray-400">Bar chart of study hours over time.</p>
-            </div>
-
-            <div
-              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
-              data-value="ambient">
-              <div class="flex items-center gap-2">
-                <svg class="text-gray-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
-                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M17.5 19c0-1.7-1.3-3-3-3s-3 1.3-3 3c0-1.7-1.3-3-3-3s-3 1.3-3 3" />
-                  <path d="M3 19V5c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-                </svg>
-                <span class="font-bold text-sm">Soundscapes</span>
-              </div>
-              <p class="text-xs text-gray-400">White, brown, and pink noise.</p>
-            </div>
-
-            <div
-              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
-              data-value="youtube">
-              <div class="flex items-center gap-2">
-                <svg class="text-red-500" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
-                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path
-                    d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
-                  <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
-                </svg>
-                <span class="font-bold text-sm">YouTube</span>
-              </div>
-              <p class="text-xs text-gray-400">Embed lectures or lofi music.</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="border-t border-gray-700 pt-4 mt-2">
-          <label for="new-card-title" class="sr-only">Card Title</label>
-          <input type="text" id="new-card-title" placeholder="Card Title"
-            class="form-input rounded-md p-2 w-full mb-3 text-sm bg-black/40 border-gray-600 focus:border-indigo-500"
-            required>
-
-          <label for="new-card-content" class="sr-only">Card Content</label>
-          <textarea id="new-card-content" placeholder="Card Content" rows="3"
-            class="form-input rounded-md p-2 w-full mb-4 text-sm bg-black/40 border-gray-600 focus:border-indigo-500 resize-none"></textarea>
-
-          <div class="flex justify-end gap-3">
-            <button type="button" id="cancel-add-card"
-              class="bg-gray-700 hover:bg-gray-600 text-white text-sm font-bold py-2 px-4 rounded-md transition-colors">Cancel</button>
-            <button type="submit"
-              class="btn-primary text-sm font-bold py-2 px-4 rounded-md shadow-lg shadow-indigo-500/20">Add
-              Card</button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <div id="customize-modal" class="modal-overlay hidden">
-    <div class="card w-11/12 max-w-4xl h-[80vh] flex flex-col p-0 overflow-hidden relative shadow-2xl">
-
-      <div class="flex justify-between items-center px-6 py-4 border-b border-gray-700/50 bg-black/20">
-        <h2 class="text-xl font-bold tracking-tight flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="3"></circle>
-            <path
-              d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
-            </path>
-          </svg>
-          Settings
-        </h2>
-        <button id="close-customize" class="text-secondary hover:text-white transition-colors p-1">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </button>
-        <button id="close-customize-icon-btn" class="hidden"></button>
-      </div>
-
-      <div class="flex flex-col md:flex-row flex-1 overflow-hidden">
-
-        <div
-          class="w-full md:w-56 bg-black/20 border-r border-gray-700/30 flex flex-row md:flex-col overflow-x-auto md:overflow-y-auto">
-          <button class="settings-nav-btn active" data-target="general">
-            <span>General</span>
-          </button>
-          <button class="settings-nav-btn" data-target="appearance">
-            <span>Appearance</span>
-          </button>
-          <button class="settings-nav-btn" data-target="features">
-            <span>Features</span>
-          </button>
-          <button class="settings-nav-btn" data-target="data">
-            <span>Data & Reset</span>
-          </button>
-          <button class="settings-nav-btn text-red-400 hover:text-red-300" data-target="developer">
-            <span>Developer</span>
-          </button>
-        </div>
-
-        <div class="flex-1 overflow-y-auto p-6 bg-black/10 relative">
-
-          <div id="panel-general" class="settings-panel space-y-6">
-            <div class="settings-group">
-              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Target
-                Exam</h3>
-              <div class="grid grid-cols-2 gap-3 mb-3">
-                <div>
-                  <label class="text-xs text-secondary mb-1 block">Exam</label>
-                  <select id="exam-type-select" class="form-input text-sm w-full">
-                    <option value="JEE">JEE Main</option>
-                    <option value="NEET">NEET</option>
-                    <option value="Custom">Custom</option>
-                  </select>
-                </div>
-                <div>
-                  <label class="text-xs text-secondary mb-1 block">Year</label>
-                  <select id="exam-year-select" class="form-input text-sm w-full">
-                    <option value="2026">2026</option>
-                    <option value="2027">2027</option>
-                    <option value="2028">2028</option>
-                  </select>
-                </div>
-              </div>
-
-              <div id="jee-details-container"
-                class="p-3 rounded-lg border border-dashed border-gray-700 bg-black/20 hidden">
-                <div class="grid grid-cols-2 gap-3">
-                  <div><label class="text-xs text-secondary mb-1 block">Session</label><select id="jee-session-select"
-                      class="form-input text-sm w-full">
-                      <option value="January">January</option>
-                      <option value="April">April</option>
-                    </select></div>
-                  <div><label class="text-xs text-secondary mb-1 block">Shift Date</label><input type="date"
-                      id="jee-shift-input" class="form-input text-sm w-full"></div>
-                </div>
-              </div>
-
-              <div id="custom-exam-container"
-                class="p-3 rounded-lg border border-dashed border-gray-700 bg-black/20 hidden">
-                <div class="space-y-3">
-                  <div><label class="text-xs text-secondary mb-1 block">Name</label><input type="text"
-                      id="custom-exam-name" placeholder="e.g. BITSAT" class="form-input text-sm w-full"></div>
-                  <div><label class="text-xs text-secondary mb-1 block">Date</label><input type="date"
-                      id="custom-exam-date" class="form-input text-sm w-full"></div>
-                </div>
-              </div>
-            </div>
-
-            <div class="settings-group">
-              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Add Custom
-                Subjects</h3>
-              <div id="subject-manager-list"
-                class="flex flex-wrap gap-2 mb-3 min-h-[40px] p-2 rounded-lg border border-gray-700/50 bg-black/20">
-                <span class="text-xs text-gray-500 italic p-1">Loading...</span>
-              </div>
-              <div class="flex gap-2">
-                <input type="text" id="new-subject-input" placeholder="Add new subject..."
-                  class="form-input text-sm w-full">
-                <button id="add-subject-btn"
-                  class="btn-primary px-4 py-2 font-bold text-xs whitespace-nowrap">Add</button>
-              </div>
-            </div>
-          </div>
-
-          <div id="panel-appearance" class="settings-panel hidden space-y-6">
-            <div class="settings-group">
-              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Interface
-              </h3>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label class="text-xs text-secondary mb-1 block">Color Theme</label>
-                  <select id="theme-select" class="form-input text-sm w-full">
-                    <option value="default">Deep Space</option>
-                    <option value="cyberpunk">Cyberpunk</option>
-                    <option value="forest">Forest</option>
-                    <option value="rose-gold">Rose Gold</option>
-                    <option value="ocean">Ocean</option>
-                    <option value="sunset">Sunset</option>
-                    <option value="dracula">Dracula</option>
-                    <option value="coffee">Coffee Break</option>
-                    <option value="nordic">Nordic Frost</option>
-                    <option value="lavender">Lavender Haze</option>
-                    <option value="crimson">Crimson Elite</option>
-                    <option value="alakh-pandey" class="hidden">Alakh Pandey</option>
-                  </select>
-                </div>
-                <div>
-                  <label class="text-xs text-secondary mb-1 block">Typography</label>
-                  <select id="font-select" class="form-input text-sm w-full">
-                    <option value="'Inter', sans-serif">Inter (Default)</option>
-                    <option value="'Poppins', sans-serif">Poppins (Modern)</option>
-                    <option value="'Space Grotesk', sans-serif">Space Grotesk (Sci-Fi)</option>
-                    <option value="'Oswald', sans-serif">Oswald (Condensed)</option>
-                    <option value="'Roboto Slab', serif">Roboto Slab (Serif)</option>
-                    <option value="'Fira Code', monospace">Fira Code (Code)</option>
-                    <option value="'JetBrains Mono', monospace">JetBrains Mono (Dev)</option>
-                    <option value="'Comic Neue', cursive">Comic Sans</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-
-            <div class="settings-group">
-              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Background
-              </h3>
-              <div class="grid grid-cols-4 gap-2 mb-4" id="preset-wallpaper-grid"></div>
-
-              <div class="flex gap-2">
-                <input type="text" id="bg-image-url" placeholder="Custom Image URL..."
-                  class="form-input text-xs w-full">
-                <button id="remove-bg-btn"
-                  class="bg-red-600/80 hover:bg-red-600 text-white px-3 rounded-md transition-colors">✕</button>
-              </div>
-            </div>
-          </div>
-
-          <div id="panel-features" class="settings-panel hidden space-y-6">
-
-            <div class="settings-group mb-6">
-              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Performance</h3>
-              <div class="space-y-3">
-                <label
-                  class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer border border-transparent hover:border-gray-600">
-                  <div>
-                    <span class="text-sm font-medium block">Lite Mode</span>
-                    <span class="text-[10px] text-secondary">Reduces blurs, shadows, and animations for older
-                      devices.</span>
-                  </div>
-                  <input type="checkbox" id="lite-mode-toggle" class="form-input-toggle">
-                </label>
-              </div>
-            </div>
-
-            <div class="settings-group">
-              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Focus &
-                Layout</h3>
-              <div class="space-y-3">
-
-
-                <label
-                  class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer border border-transparent hover:border-gray-600">
-                  <div>
-                    <span class="text-sm font-medium block">Focus Shield</span>
-                    <span class="text-[10px] text-secondary">Pauses timers if you switch
-                      tabs.</span>
-                  </div>
-                  <input type="checkbox" id="focus-shield-toggle" class="form-input-toggle">
-                </label>
-                <label
-                  class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer border border-transparent hover:border-gray-600">
-                  <div>
-                    <span class="text-sm font-medium block">Doom Tick</span>
-                    <span class="text-[10px] text-secondary">Plays a ticking sound every 60s.</span>
-                  </div>
-                  <input type="checkbox" id="ticking-sound-toggle" class="form-input-toggle">
-                </label>
-              </div>
-            </div>
-
-
-            <div class="settings-group">
-              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Media</h3>
-              <div class="space-y-3">
-                <label
-                  class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer border border-transparent hover:border-gray-600">
-                  <span class="text-sm">YouTube Tint</span>
-                  <input type="checkbox" id="youtube-tint-toggle" class="form-input-toggle">
-                </label>
-                <label
-                  class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer border border-transparent hover:border-gray-600">
-                  <span class="text-sm">Blur Player</span>
-                  <input type="checkbox" id="youtube-blur-toggle" class="form-input-toggle">
-                </label>
-              </div>
-            </div>
-          </div>
-
-          <div id="panel-data" class="settings-panel hidden flex flex-col h-full justify-center space-y-8">
-            <div class="text-center space-y-2">
-              <h3 class="text-lg font-bold text-white">Data Management</h3>
-              <p class="text-xs text-secondary max-w-xs mx-auto">Backup your progress locally or wipe the
-                slate clean.</p>
-            </div>
-
-            <div class="grid grid-cols-2 gap-4">
-              <button id="export-data-btn"
-                class="flex flex-col items-center justify-center p-6 rounded-xl bg-green-900/20 border border-green-700/50 hover:bg-green-900/40 hover:border-green-500 transition-all group">
-                <svg class="w-8 h-8 mb-3 text-green-500 group-hover:scale-110 transition-transform"
-                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                </svg>
-                <span class="font-bold text-green-400">Export JSON</span>
-              </button>
-
-              <button id="import-data-btn"
-                class="flex flex-col items-center justify-center p-6 rounded-xl bg-blue-900/20 border border-blue-700/50 hover:bg-blue-900/40 hover:border-blue-500 transition-all group">
-                <svg class="w-8 h-8 mb-3 text-blue-500 group-hover:scale-110 transition-transform"
-                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-                </svg>
-                <span class="font-bold text-blue-400">Import JSON</span>
-              </button>
-            </div>
-
-            <div class="border-t border-gray-700/50 pt-8">
-              <button id="reset-dashboard-btn"
-                class="w-full flex items-center justify-center gap-2 p-4 rounded-xl bg-red-900/10 border border-red-900/30 hover:bg-red-900/30 hover:border-red-500/50 text-red-400 hover:text-red-300 transition-all">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
-                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M3 6h18" />
-                  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-                  <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-                </svg>
-                <span class="font-bold">Reset Dashboard Factory Settings</span>
-              </button>
-            </div>
-          </div>
-
-          <div id="panel-developer" class="settings-panel hidden space-y-4 h-full flex flex-col">
-            <div class="flex justify-between items-center">
-              <div>
-                <h3 class="text-sm font-bold text-red-400 uppercase tracking-wider">Settings Editor</h3>
-                <p class="text-[10px] text-gray-500">Edit raw application state. Incorrect values will break the app.
-                </p>
-              </div>
-              <button id="dev-save-btn"
-                class="btn-primary px-4 py-2 text-xs font-bold bg-red-600 hover:bg-red-700 border-red-500">
-                Save & Apply
-              </button>
-            </div>
-
-            <textarea id="dev-json-input"
-              class="flex-1 w-full bg-black/50 border border-gray-700 rounded-lg p-3 font-mono text-[10px] leading-relaxed text-green-400 focus:outline-none focus:border-red-500 resize-none custom-scrollbar"
-              spellcheck="false"></textarea>
-          </div>
-
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <template id="line-graph-card-template">
-    <div class="card custom-card" data-card-type="line-graph">
-      <div class="card-header pb-2 border-b border-gray-700/30">
-        <h2 class="text-lg font-semibold card-title flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-            style="color: var(--accent-color);">
-            <path d="M3 3v18h18" />
-            <path d="m19 9-5 5-4-4-3 3" />
-          </svg>
-          Progress Tracker
-        </h2>
-        <div class="card-header-controls">
-          <button class="toggle-colspan-btn" title="Toggle size"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
-              <path d="M3 3l6 6" />
-              <path d="M3 3v4m0-4h4" />
-            </svg></button>
-          <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
-              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round">
-              <path d="M3 6h18" />
-              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-            </svg></button>
-          <span class="drag-handle"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
-              fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="9" cy="12" r="1" />
-              <circle cx="9" cy="5" r="1" />
-              <circle cx="9" cy="19" r="1" />
-              <circle cx="15" cy="12" r="1" />
-              <circle cx="15" cy="5" r="1" />
-              <circle cx="15" cy="19" r="1" />
-            </svg></span>
-        </div>
-      </div>
-      <div class="card-content">
-        <div class="grid grid-cols-3 gap-2 mb-4 mt-1">
-          <div class="bg-white/5 rounded-lg p-2 text-center">
-            <div class="text-[10px] text-secondary uppercase tracking-wider">Average</div>
-            <div class="text-lg font-bold mean-score-display text-white">0</div>
-          </div>
-          <div class="bg-white/5 rounded-lg p-2 text-center">
-            <div class="text-[10px] text-secondary uppercase tracking-wider">Best</div>
-            <div class="text-lg font-bold max-score-display" style="color: var(--accent-color);">0</div>
-          </div>
-          <div class="bg-white/5 rounded-lg p-2 text-center">
-            <div class="text-[10px] text-secondary uppercase tracking-wider">Trend</div>
-            <div class="text-lg font-bold trend-display text-gray-400">-</div>
-          </div>
-        </div>
-
-        <div class="mb-4 h-56 relative w-full">
-          <canvas class="marks-chart"></canvas>
-        </div>
-
-        <div class="chart-toggles flex justify-center flex-wrap gap-2 mb-4">
-          <button data-subject="total"
-            class="text-[10px] px-3 py-1 rounded-full border transition-all font-semibold shadow-sm"
-            style="background-color: var(--accent-color); border-color: var(--accent-color); color: white;">Total</button>
-          <button data-subject="physics"
-            class="text-[10px] px-3 py-1 rounded-full border border-gray-600 bg-gray-800/50 text-secondary hover:text-white hover:border-blue-500 transition-all">Physics</button>
-          <button data-subject="chemistry"
-            class="text-[10px] px-3 py-1 rounded-full border border-gray-600 bg-gray-800/50 text-secondary hover:text-white hover:border-green-500 transition-all">Chemistry</button>
-          <button data-subject="maths"
-            class="text-[10px] px-3 py-1 rounded-full border border-gray-600 bg-gray-800/50 text-secondary hover:text-white hover:border-red-500 transition-all">Math/Bio</button>
-        </div>
-
-        <div class="mb-3">
-          <button
-            class="toggle-add-marks-form w-full text-xs text-secondary hover:text-white flex items-center justify-center gap-1 py-1 transition-colors">
-            + Add Test Score
-          </button>
-          <form class="add-marks-form grid grid-cols-4 gap-2 mt-2 hidden">
-            <input type="text" name="name" placeholder="Test Name"
-              class="form-input rounded p-2 text-xs col-span-4 bg-black/20" required>
-            <input type="number" name="phy" placeholder="Phy"
-              class="form-input rounded p-2 text-xs w-full text-center bg-black/20" required>
-            <input type="number" name="chem" placeholder="Chem"
-              class="form-input rounded p-2 text-xs w-full text-center bg-black/20" required>
-            <input type="number" name="math" placeholder="M/B"
-              class="form-input rounded p-2 text-xs w-full text-center bg-black/20" required>
-            <input type="number" name="maxMarks" placeholder="Total"
-              class="form-input rounded p-2 text-xs w-full text-center bg-black/20" required>
-            <button type="submit"
-              class="btn-primary font-bold py-1.5 rounded text-xs col-span-4 shadow-lg">Save</button>
-          </form>
-        </div>
-
-        <div class="mt-2">
-          <div class="flex justify-between items-center mb-2 px-1">
-            <h3 class="text-[10px] font-bold text-secondary uppercase tracking-widest">History</h3>
-            <div class="flex items-center gap-2 text-xs">
-              <label class="text-secondary text-[10px]">Target:</label>
-              <input type="number"
-                class="target-score-input bg-gray-800/50 border border-gray-700 rounded px-1 py-0.5 w-12 text-right text-white text-[10px]"
-                placeholder="0">
-            </div>
-          </div>
-          <ul class="marks-list space-y-2 max-h-32 overflow-y-auto pr-1 custom-scrollbar"></ul>
-        </div>
-      </div>
-    </div>
-  </template>
-
-  <div id="confirm-modal" class="modal-overlay hidden">
-    <div class="card w-11/12 max-w-sm">
-      <h2 id="confirm-title" class="text-xl font-semibold mb-2">Are you sure?</h2>
-      <p id="confirm-message" class="text-sm text-secondary mb-6"></p>
-      <div class="flex justify-end gap-3">
-        <button type="button" id="confirm-cancel-btn"
-          class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-md">Cancel</button>
-        <button type="button" id="confirm-ok-btn"
-          class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md">Confirm</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- <div id="mobile-alert"
-        class="fixed bottom-4 left-4 right-4 bg-yellow-400 text-black p-3 text-center text-sm rounded-lg flex justify-between items-center hidden z-50">
-        <span>Welcome to StudyLocus! This is your personalized JEE/NEET dashboard. Drag, drop, and click the '+' button
-            to add different cards to your space. Use the customise button to customise the dashboard to your liking.
-            For more details, check the Information tab.</span>
-        <button id="close-alert-btn" class="font-bold text-lg ml-4" aria-label="Close mobile alert">&times;</button>
-    </div>
-     -->
-
-  <div id="sign-in-modal" class="modal-overlay hidden flex items-center justify-center z-50">
-    <div class="card w-11/12 max-w-sm border border-[var(--border-color)] shadow-2xl">
-      <h2 class="text-xl font-bold mb-2 text-white text-center">Welcome!</h2>
-      <p class="text-xs text-secondary mb-6 text-center">Sign in to sync your study dashboard across all your devices +
-        access social features.</p>
-
-      <button id="google-sign-in-action-btn"
-        class="w-full flex items-center justify-center gap-3 bg-white hover:bg-gray-200 text-black font-bold py-2.5 px-4 rounded-lg transition-colors mb-4">
-        <svg class="w-5 h-5" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M47.532 24.552c0-1.566-.14-3.084-.404-4.548H24.5v8.58h12.944c-.566 2.76-2.213 5.108-4.72 6.708v5.524h7.112c4.162-3.832 6.596-9.42 6.596-16.264z"
-            fill="#4285F4" />
-          <path
-            d="M24.5 48c6.48 0 11.944-2.14 15.928-5.788l-7.112-5.524c-2.14 1.44-4.884 2.292-7.816 2.292-6.004 0-11.084-4.04-12.9-9.492H4.42v5.7c3.48 6.912 10.32 11.532 18.08 11.532l2 .28z"
-            fill="#34A853" />
-          <path
-            d="M11.6 28.98c-.34-.996-.54-2.052-.54-3.144s.2-2.148.54-3.144V16.992H4.42C2.852 20.04 2 23.436 2 27.024c0 3.588.852 6.984 2.42 10.032l7.18-5.7v-.376z"
-            fill="#FBBC05" />
-          <path
-            d="M24.5 9.8c3.516 0 6.66 1.212 9.128 3.54l6.32-6.32C36.44.88 30.98 0 24.5 0 16.74 0 9.9 4.62 6.42 11.532l7.18 5.7c1.816-5.452 6.896-9.432 12.9-9.432z"
-            fill="#EA4335" />
-        </svg>
-        Sign in with Google
-      </button>
-
-      <p class="text-[10px] text-gray-500 text-center px-2">
-        By continuing, you acknowledge and agree to our
-        <a href="termsandconditions.html" class="underline hover:text-white" target="_blank">Terms & Conditions</a> and
-        <a href="privacypolicy.html" class="underline hover:text-white" target="_blank">Privacy Policy</a>.
-      </p>
-
-      <div class="flex justify-end mt-4 pt-4 border-t border-gray-700/50">
-        <button id="close-sign-in-modal"
-          class="text-xs font-bold text-gray-400 hover:text-white transition-colors">Cancel</button>
-      </div>
-    </div>
-  </div>
-
-
-  <div id="info-modal" class="modal-overlay hidden">
-    <div class="card w-11/12 max-w-lg">
-      <!-- Tab Navigation -->
-      <nav class="tab-nav">
-        <button class="tab-btn active" data-tab="quick-start">Quick Start</button>
-        <button class="tab-btn" data-tab="whats-new">What's New</button>
-        <button class="tab-btn" data-tab="feedback">Feedback</button>
-        <button class="tab-btn" data-tab="about">About & Support</button>
-      </nav>
-
-      <!-- Tab Content Panels -->
-      <div>
-        <!-- Quick Start Panel -->
-        <div id="tab-quick-start" class="tab-content space-y-3 text-sm">
-          <button onclick="startTutorial()"
-            class="w-full mb-4 flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md font-bold transition-all">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="12" cy="12" r="10" />
-              <polygon points="10 8 16 12 10 16 10 8" />
-            </svg>
-            Take the Tour
-          </button>
-          <p><strong>YOU CAN NOW CHANGE DATE ACCORDING TO UR SHIFT IN CUSTOMISE MENU !!!</strong></p>
-          <p>Open "What's new" to see more changes !!!!</p>
-          <p>If you liked this update, follow me on <a href="https://github.com/svalordev" style="color:aqua"
-              target="_blank">github</a>!</p>
-          <p><strong>GOOD LUCK FOR YOUR PREPARATION ! 🫡</strong></p>
-          <p><strong>YOU CAN CHANGE JEE/NEET AND YEAR IN CUSTOMISE MENU</strong></p>
-
-        </div>
-
-        <!-- What's New Panel -->
-        <div id="tab-whats-new" class="tab-content hidden space-y-3 text-sm">
-          <h3 class="text-md font-bold text-primary">Version 1.5 (February 2026)</h3>
-          <ul class="list-disc list-inside text-secondary space-y-2">
-            <li>Revamped top bar</li>
-            <li>Introduced active user count</li>
-            <li>Made sign in process adhere to EU guidelines.</li>
-            <li>Introduced Lite Mode which improves performance.</li>
-          </ul>
-        </div>
-
-        <!-- Feedback Panel -->
-        <div id="tab-feedback" class="tab-content hidden space-y-4 text-sm text-center">
-          <p>Have an idea or found a bug? Join the community!</p>
-          <a href="https://discord.gg/c8xHpTfM" target="_blank" class="btn-primary inline-block"
-            style="padding: 10px;">Join the Discord
-            Server</a>
-          <p class="text-xs text-secondary">You can also submit feedback or report issues on the project's
-            GitHub page.</p>
-        </div>
-
-        <!-- About & Support Panel -->
-        <div id="tab-about" class="tab-content hidden space-y-3 text-sm">
-          <p><strong>Created by:</strong> <a href="https://github.com/svalordev" target="_blank">Shaurya
-              Pratap Singh</a></p><br>
-          <p><strong>Project Repository:</strong> <a href="https://github.com/SvalTech/studylocus/" target="_blank">View
-              on GitHub</a></p><br>
-          <div class="border-t border-gray-700 my-4"></div>
-          <p>Enjoying StudyLocus? Star the project repository on Github (link above), will greatly appreciate
-            it, Thanks!</p>
-          <p>+ This project will try to stay free to use + ads free perpetually :)</p>
-        </div>
-
-      </div>
-
-      <div class="flex justify-end mt-6">
-        <button type="button" id="close-info-modal"
-          class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-md">Close</button>
-      </div>
-    </div>
-  </div>
-  <div id="shortcuts-modal" class="modal-overlay hidden">
-    <div class="card w-11/12 max-w-sm">
-      <div class="card-header">
-        <h2 class="text-xl font-semibold">Keyboard Shortcuts</h2>
-        <div class="card-header-controls">
-          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs text-gray-300 font-mono">?</kbd>
-        </div>
-      </div>
-      <div class="space-y-3 mt-4 text-sm">
-        <div class="flex justify-between items-center border-b border-gray-700/50 pb-2">
-          <span class="text-secondary">Toggle Timer (Pomodoro/Log)</span>
-          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">Space</kbd>
-        </div>
-        <div class="flex justify-between items-center border-b border-gray-700/50 pb-2">
-          <span class="text-secondary">Zen Mode</span>
-          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">Z</kbd>
-        </div>
-        <div class="flex justify-between items-center border-b border-gray-700/50 pb-2">
-          <span class="text-secondary">Add New Card</span>
-          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">N</kbd>
-        </div>
-        <div class="flex justify-between items-center border-b border-gray-700/50 pb-2">
-          <span class="text-secondary">Customize Menu</span>
-          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">C</kbd>
-        </div>
-        <div class="flex justify-between items-center border-b border-gray-700/50 pb-2">
-          <span class="text-secondary">Super Focus Mode</span>
-          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">F</kbd>
-        </div>
-        <div class="flex justify-between items-center">
-          <span class="text-secondary">Close Modal / Blur Input</span>
-          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">Esc</kbd>
-        </div>
-      </div>
-      <div class="flex justify-end mt-6">
-        <button type="button" id="close-shortcuts-modal" class="btn-primary font-bold py-2 px-4 rounded-md">Got
-          it</button>
-      </div>
-    </div>
-  </div>
-  <div class="fab-container">
-    <div class="fab-menu card p-2 space-y-1">
-      <h3 class="text-sm font-bold px-2 text-secondary">sval.tech</h3>
-      <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-gray-700/50">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <rect width="18" height="18" x="3" y="3" rx="2"></rect>
-          <path d="M7 3v18"></path>
-          <path d="M12 3v18"></path>
-          <path d="M17 3v18"></path>
-          <path d="M3 7.5h18"></path>
-          <path d="M3 12h18"></path>
-          <path d="M3 16.5h18"></path>
-        </svg>
-        <span>Dashboard</span>
-      </a>
-      <a href="https://svaltech.github.io/syllabustracker" target="_blank"
-        class="flex items-center gap-2 p-2 rounded-md hover:bg-gray-700/50">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
-          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
-          <path d="m10 14-2 2 2 2"></path>
-          <path d="m14 6-2 2 2 2"></path>
-        </svg>
-        <span>Syllabus Tracker</span>
-      </a>
-      <a href="https://svaltech.github.io/zenith" target="_blank"
-        class="flex items-center gap-2 p-2 rounded-md hover:bg-gray-700/50">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
-          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
-          <path d="m10 14-2 2 2 2"></path>
-          <path d="m14 6-2 2 2 2"></path>
-        </svg>
-        <span>Zenith</span>
-      </a>
-    </div>
-    <button
-      class="w-14 h-14 rounded-full bg-gray-800 shadow-lg flex items-center justify-center text-white hover:bg-gray-700 transition-colors"
-      aria-label="Toggle sval.tech products menu">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <rect x="3" y="3" width="7" height="7"></rect>
-        <rect x="14" y="3" width="7" height="7"></rect>
-        <rect x="14" y="14" width="7" height="7"></rect>
-        <rect x="3" y="14" width="7" height="7"></rect>
-      </svg>
-    </button>
-  </div>
-
-  <input type="file" id="import-file-input" class="hidden" accept=".json">
-
-  <div id="god-mode-panel" class="hidden fixed bottom-4 left-4 card p-4 w-64 z-50 space-y-3">
-    <h3 class="text-lg font-bold text-center" style="color: var(--accent-color);">-- GOD MODE --</h3>
-    <p class="text-xs text-secondary text-center">Ultimate power is now yours.</p>
-    <div class="border-t border-[var(--border-color)]"></div>
-    <div class="space-y-2">
-      <button id="god-mode-theme-btn"
-        class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md text-sm">Matrix
-        Theme</button>
-      <button id="god-mode-complete-tasks-btn"
-        class="w-full bg-sky-600 hover:bg-sky-700 text-white font-bold py-2 px-4 rounded-md text-sm">Complete
-        All Tasks</button>
-      <button id="god-mode-perfect-score-btn"
-        class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-md text-sm">Get
-        Perfect Score</button>
-      <button id="god-mode-timewarp-btn"
-        class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded-md text-sm">Time
-        Warp (+7 Days)</button>
-      <button id="god-mode-scramble-btn"
-        class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md text-sm">Scramble
-        Layout</button>
-      <button id="god-mode-nuke-btn"
-        class="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-2 px-4 rounded-md text-sm">NUKE</button>
-    </div>
-    <button id="god-mode-close-btn" class="absolute top-2 right-2 text-secondary hover:text-primary"
-      aria-label="Close God Mode Panel">&times;</button>
-  </div>
-
-  <div id="super-focus-overlay"
-    class="fixed inset-0 z-[9999] hidden flex flex-col bg-gray-900/95 backdrop-blur-xl transition-all duration-300 text-white font-sans selection:bg-indigo-500/30">
-
-    <div class="absolute top-0 left-0 right-0 p-6 flex justify-between items-center z-10">
-      <h1 class="text-2xl font-bold tracking-tighter hidden md:block select-none">sval.tech</h1>
-
-      <div class="flex bg-white/5 backdrop-blur-md rounded-full p-1 border border-white/10 shadow-lg">
-        <button class="focus-tab-btn active px-6 py-2 rounded-full text-sm font-medium transition-all hover:bg-white/10"
-          data-view="clock">Clock</button>
-        <button class="focus-tab-btn px-6 py-2 rounded-full text-sm font-medium transition-all hover:bg-white/10"
-          data-view="timer">Timer</button>
-        <button class="focus-tab-btn px-6 py-2 rounded-full text-sm font-medium transition-all hover:bg-white/10"
-          data-view="dashboard">Dashboard</button>
-      </div>
-
-      <div class="flex gap-3">
-        <button id="toggle-focus-fullscreen"
-          class="group flex items-center justify-center w-10 h-10 rounded-full bg-white/5 hover:bg-white/20 border border-white/10 transition-all"
-          title="Toggle Fullscreen">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M8 3H5a2 2 0 0 0-2 2v3" />
-            <path d="M16 3h3a2 2 0 0 1 2 2v3" />
-            <path d="M8 21H5a2 2 0 0 1-2-2v-3" />
-            <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
-          </svg>
-        </button>
-
-        <button id="exit-super-focus"
-          class="group flex items-center justify-center w-10 h-10 rounded-full bg-white/5 hover:bg-red-500/20 hover:text-red-400 border border-white/10 transition-all"
-          title="Exit Focus Mode">
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M18 6 6 18" />
-            <path d="m6 6 12 12" />
-          </svg>
-        </button>
-      </div>
-    </div>
-
-    <div id="focus-view-clock"
-      class="focus-view flex-1 flex flex-col items-center justify-center text-center p-4 relative">
-      <div class="space-y-4 relative z-10">
-        <div id="focus-quote-display"
-          class="text-xl md:text-2xl font-serif italic text-white/80 max-w-2xl mx-auto leading-relaxed">
-          "Believe in yourself and your abilities!"
-        </div>
-        <div id="focus-clock-display"
-          class="text-[6rem] md:text-[10rem] font-bold tabular-nums leading-none tracking-tight text-white drop-shadow-2xl">
-          12:00
-        </div>
-        <div id="focus-date-display" class="text-lg md:text-xl text-white/60 uppercase tracking-widest font-medium">
-          Monday, January 1st
-        </div>
-      </div>
-    </div>
-
-    <div id="focus-view-timer" class="focus-view hidden flex-1 flex flex-col items-center justify-center p-4">
-      <div
-        class="bg-white/5 border border-white/10 rounded-[3rem] p-12 md:p-20 backdrop-blur-2xl shadow-2xl text-center relative overflow-hidden">
-        <div id="timer-pulse"
-          class="absolute inset-0 bg-indigo-500/10 opacity-0 transition-opacity duration-1000 pointer-events-none">
-        </div>
-
-        <div class="relative z-10">
-          <div class="flex justify-center gap-4 mb-8">
-            <button
-              class="timer-mode-btn active text-sm font-bold uppercase tracking-wider text-white/40 hover:text-white transition-colors"
-              data-mode="pomodoro">Pomodoro</button>
-            <span class="text-white/20">|</span>
-            <button
-              class="timer-mode-btn text-sm font-bold uppercase tracking-wider text-white/40 hover:text-white transition-colors"
-              data-mode="logger">Stopwatch</button>
-          </div>
-
-          <div id="focus-big-timer"
-            class="text-[5rem] md:text-[8rem] font-bold font-mono tabular-nums leading-none mb-8">
-            25:00
-          </div>
-
-          <div class="flex justify-center gap-6">
-            <button id="focus-timer-toggle"
-              class="w-32 py-4 bg-white/10 text-white font-bold rounded-2xl hover:bg-white/20 transition-all">START</button>
-            <button id="focus-timer-reset"
-              class="w-32 py-4 bg-white/10 text-white font-bold rounded-2xl hover:bg-white/20 transition-all">RESET</button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div id="focus-view-dashboard" class="focus-view hidden flex-1 flex items-center p-6 md:p-12 overflow-hidden">
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-7xl mx-auto h-[600px] max-h-[80vh]">
-
-        <div
-          class="bg-black/40 border border-white/10 rounded-3xl p-6 backdrop-blur-md flex flex-col hover:border-white/20 transition-colors">
-          <h3 class="text-white/90 font-bold mb-1 flex items-center gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
-              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
-            </svg>
-            Scratchpad
-          </h3>
-          <p class="text-xs text-white/40 mb-4">Quick notes disappear on refresh</p>
-          <textarea
-            class="flex-1 w-full bg-transparent resize-none outline-none text-white/80 placeholder-white/20 leading-relaxed text-sm font-mono"
-            placeholder="Jot down quick thoughts, formulas, or syllabus topics here..."></textarea>
-        </div>
-
-        <div
-          class="bg-white/5 border border-white/10 rounded-3xl p-6 backdrop-blur-xl flex flex-col items-center justify-center relative shadow-2xl hover:border-indigo-500/50 transition-colors">
-          <div class="text-center">
-            <div id="dashboard-timer-display" class="text-6xl font-bold font-mono tabular-nums mb-6">25:00
-            </div>
-            <div class="flex gap-3 justify-center">
-              <button id="dash-timer-toggle"
-                class="px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-lg transition-colors">Start</button>
-              <button id="dash-timer-reset"
-                class="px-6 py-2 bg-white/10 hover:bg-white/20 text-white font-bold rounded-lg transition-colors">Reset</button>
-            </div>
-            <div class="mt-6 text-xs text-white/40 uppercase tracking-widest">Focus Mode</div>
-          </div>
-        </div>
-
-        <div
-          class="bg-black/40 border border-white/10 rounded-3xl p-6 backdrop-blur-md flex flex-col hover:border-white/20 transition-colors">
-          <h3 class="text-white/90 font-bold mb-4 flex items-center gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M9 11l3 3L22 4" />
-              <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
-            </svg>
-            Tasks
-          </h3>
-          <div class="flex-1 overflow-y-auto no-scrollbar pr-2">
-            <ul id="focus-dashboard-tasks" class="space-y-2">
-            </ul>
-          </div>
-          <div class="mt-4 pt-4 border-t border-white/10">
-            <input type="text" id="focus-dash-add-task" placeholder="Add task & press Enter..."
-              class="w-full bg-transparent outline-none text-sm text-white placeholder-white/30">
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </div>
-
-</body>
-
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js"></script>
+
+  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" />
+  <script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>

+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "SoftwareApplication",
+      "name": "StudyLocus Dashboard",
+      "applicationCategory": "EducationalApplication",
+      "operatingSystem": "Web",
+      "offers": {
+        "@type": "Offer",
+        "price": "0"
+      },
+      "author": {
+        "@type": "Person",
+        "name": "Shaurya Pratap Singh",
+        "url": "https://github.com/svalordev"
+      },
+      "description": "A customizable dashboard for students preparing for JEE, NEET, and other competitive exams. Track your progress with a journey graph, manage tasks with to-do lists, and stay focused with a Pomodoro timer."
+    }
+    </script>
+  <script type="module" crossorigin src="./assets/main-CDlbpbEp.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/main-CC9IF3fq.css">
+</head>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-TCK0S6VC58"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() { dataLayer.push(arguments); }
+  gtag('js', new Date());
+
+  gtag('config', 'G-TCK0S6VC58');
+</script>
+
+<body class="antialiased">
+
+  <div id="app-background" class="fixed inset-0 w-full h-full -z-50 pointer-events-none">
+  </div>
+
+  <div id="bg-overlay" class="fixed inset-0 w-full h-full -z-40 pointer-events-none"></div>
+  <!-- Riced Linux Header -->
+  <header class="top-bar">
+    <div class="top-bar-left">
+      <h1 id="main-title-riced" class="font-bold cursor-pointer"></h1>
+    </div>
+    <div class="top-bar-center header-controls">
+      <button class="customize-btn" title="Customize Dashboard" aria-label="Customize Dashboard">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="4" x2="4" y1="21" y2="14"></line>
+          <line x1="4" x2="4" y1="10" y2="3"></line>
+          <line x1="12" x2="12" y1="21" y2="12"></line>
+          <line x1="12" x2="12" y1="8" y2="3"></line>
+          <line x1="20" x2="20" y1="21" y2="16"></line>
+          <line x1="20" x2="20" y1="12" y2="3"></line>
+          <line x1="1" x2="7" y1="14" y2="14"></line>
+          <line x1="9" x2="15" y1="8" y2="8"></line>
+          <line x1="17" x2="23" y1="16" y2="16"></line>
+        </svg>
+      </button>
+      <button class="add-card-btn btn-primary" title="Add New Card" aria-label="Add New Card">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="12" y1="5" x2="12" y2="19"></line>
+          <line x1="5" y1="12" x2="19" y2="12"></line>
+        </svg>
+      </button>
+      <button class="info-btn" title="About this project" aria-label="About this project">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"></circle>
+          <path d="M12 16v-4"></path>
+          <path d="M12 8h.01"></path>
+        </svg>
+      </button>
+      <button class="zen-mode-btn" title="Enter Zen Mode" aria-label="Enter Zen Mode">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2Z"></path>
+          <path d="m9.5 16.5 4-4"></path>
+          <path d="m14.5 16.5-4-4"></path>
+          <path d="M12 8V7"></path>
+        </svg>
+      </button>
+    </div>
+
+    <div class="top-bar-right header-controls">
+      <div id="auth-container-riced"></div>
+    </div>
+  </header>
+  <div id="bg-overlay"></div>
+  <div id="sync-status-toast"></div>
+  <div class="container mx-auto px-2 sm:px-4 py-6">
+    <header class="default-header header-capsule flex flex-wrap justify-between items-center gap-y-2 relative">
+
+      <div class="flex items-center gap-3 pl-2">
+        <a href="https://sval.tech" class="hover:opacity-80 transition-opacity">
+          <span class="brand-text hidden sm:block">sval.tech</span>
+        </a>
+        <span class="hidden sm:block text-gray-600">|</span>
+        <h1 id="main-title"
+          class="text-lg sm:text-xl font-bold tracking-tight cursor-pointer hover:text-[var(--accent-color)] transition-colors">
+          JEE 2026
+        </h1>
+      </div>
+
+      <div
+        class="order-last w-full md:w-auto md:absolute md:left-1/2 md:transform md:-translate-x-1/2 flex justify-center mt-2 md:mt-0">
+        <nav class="flex p-1 bg-black/20 backdrop-blur-md rounded-full border border-white/10 shadow-inner">
+          <button
+            class="view-tab-btn active px-4 py-1.5 text-xs font-bold rounded-full transition-all text-gray-400 hover:text-white hover:bg-white/5"
+            data-target="dashboard">
+            Dashboard
+          </button>
+          <button
+            class="view-tab-btn px-4 py-1.5 text-xs font-bold rounded-full transition-all text-gray-400 hover:text-white hover:bg-white/5"
+            data-target="calendar">
+            Calendar
+          </button>
+          <button
+            class="view-tab-btn px-4 py-1.5 text-xs font-bold rounded-full transition-all text-gray-400 hover:text-white hover:bg-white/5"
+            data-target="statistics">
+            Statistics
+          </button>
+        </nav>
+      </div>
+
+      <div class="flex items-center gap-2 pr-1 ml-auto md:ml-0">
+        <div id="online-users-badge"
+          class="hidden sm:flex items-center gap-2 px-3 py-1 mr-3 rounded-full bg-green-900/20 border border-green-500/30 text-xs font-bold text-green-400">
+          <span class="relative flex h-2 w-2">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+          </span>
+          <span id="online-count-text">Loading..</span>
+        </div>
+        <div id="auth-container" class="scale-90 origin-right"></div>
+        <div class="h-4 w-px bg-white/10 mx-1 hidden sm:block"></div>
+        <div class="flex items-center gap-1.5">
+          <button class="add-card-btn capsule-btn" title="Add New Card"><svg xmlns="http://www.w3.org/2000/svg"
+              width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="5" x2="12" y2="19"></line>
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg></button>
+          <button class="customize-btn capsule-btn" title="Customize"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="12" cy="12" r="3"></circle>
+              <path
+                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
+              </path>
+            </svg></button>
+          <button class="info-btn capsule-btn" title="Info"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="16" x2="12" y2="12"></line>
+              <line x1="12" y1="8" x2="12.01" y2="8"></line>
+            </svg></button>
+          <button id="static-focus-btn" class="capsule-btn" title="Super Focus Mode"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10" />
+              <circle cx="12" cy="12" r="3" />
+            </svg></button>
+          <button class="zen-mode-btn capsule-btn" title="Enter Zen Mode"><svg xmlns="http://www.w3.org/2000/svg"
+              width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"></circle>
+              <circle cx="12" cy="12" r="4"></circle>
+              <line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line>
+              <line x1="14.83" y1="14.83" x2="19.07" y2="19.07"></line>
+              <line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line>
+              <line x1="14.83" y1="9.17" x2="18.36" y2="5.64"></line>
+              <line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line>
+            </svg></button>
+        </div>
+      </div>
+    </header>
+
+    <div id="view-container">
+
+      <div id="view-dashboard" class="view-section">
+        <main id="dashboard-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+        </main>
+      </div>
+
+      <div id="view-statistics" class="view-section glass-panel hidden animate-fade-in-down">
+        <div class="max-w-7xl mx-auto space-y-6 pb-20">
+
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="card rounded-2xl p-5 flex flex-col justify-center">
+              <div class="absolute right-0 top-0 p-4 opacity-10 group-hover:scale-110 transition-transform">
+                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="currentColor"
+                  class="text-orange-500">
+                  <path
+                    d="M17.657 18.657A8 8 0 0 1 6.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0 1 20 13a7.975 7.975 0 0 1-2.343 5.657z">
+                  </path>
+                </svg>
+              </div>
+              <div>
+                <div class="text-xs text-orange-400 font-bold uppercase tracking-widest mb-1">Current Streak</div>
+                <div class="text-3xl font-black text-white" id="stat-streak">0 Days</div>
+                <div class="text-[10px] text-gray-400 mt-1">Keep the fire burning!</div>
+              </div>
+            </div>
+
+            <div class="card rounded-2xl p-5 flex flex-col justify-center">
+              <div>
+                <div class="text-xs text-blue-400 font-bold uppercase tracking-widest mb-1">Consistency Score</div>
+                <div class="text-3xl font-black text-white" id="stat-consistency">0%</div>
+                <div class="text-[10px] text-gray-400 mt-1">Based on daily study variance</div>
+              </div>
+              <div
+                class="h-12 w-12 rounded-full border-4 border-blue-500/30 flex items-center justify-center text-xs font-bold text-blue-400"
+                id="stat-consistency-grade">
+                -
+              </div>
+            </div>
+
+
+
+            <div class="card rounded-2xl p-5 flex flex-col justify-center">
+              <div class="flex justify-between items-end">
+                <div>
+                  <div class="text-xs text-gray-400 font-bold uppercase tracking-widest mb-1">Total Logged</div>
+                  <div class="text-2xl font-bold text-white" id="stat-total-time">0h 0m</div>
+                </div>
+                <div class="text-right">
+                  <div class="text-xs text-gray-400 font-bold uppercase tracking-widest mb-1">Daily Avg</div>
+                  <div class="text-xl font-bold text-gray-200" id="stat-daily-avg">0h</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+
+            <div class="card rounded-2xl p-6 flex flex-col">
+              <h3 class="text-sm font-bold text-gray-300 uppercase tracking-wider mb-4 border-b border-white/5 pb-2">
+                Study DNA (Day Analysis)
+              </h3>
+              <div class="flex-grow flex items-center justify-center min-h-[250px] relative">
+                <canvas id="stats-radar-chart"></canvas>
+              </div>
+              <p class="text-xs text-center text-gray-500 mt-4 italic" id="stat-day-persona">Analyzing your
+                schedule...</p>
+            </div>
+
+            <div class="card rounded-2xl p-6 flex flex-col">
+              <h3 class="text-sm font-bold text-gray-300 uppercase tracking-wider mb-4 border-b border-white/5 pb-2">
+                Subject Health
+              </h3>
+              <div class="flex-grow flex flex-col justify-center gap-6">
+                <div class="h-40 relative">
+                  <canvas id="stats-subject-chart"></canvas>
+                  <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+                    <span class="text-[10px] text-gray-500">RATIO</span>
+                  </div>
+                </div>
+
+                <div class="bg-red-500/10 border border-red-500/20 rounded-lg p-3 hidden" id="neglect-container">
+                  <div class="flex items-center gap-2 mb-1">
+                    <svg class="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                    <span class="text-xs font-bold text-red-300 uppercase">Needs Attention</span>
+                  </div>
+                  <p class="text-xs text-red-200/80" id="stat-neglected-subjects">You haven't studied Chemistry in
+                    5 days.</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="card rounded-2xl p-6">
+              <h3 class="text-sm font-bold text-gray-300 uppercase tracking-wider mb-4 border-b border-white/5 pb-2">
+                Test Metrics
+              </h3>
+
+              <div class="space-y-4">
+                <div class="flex items-center justify-between p-3 bg-green-500/5 border border-green-500/10 rounded-lg">
+                  <div>
+                    <div class="text-[10px] text-green-400 uppercase font-bold">Power Subject</div>
+                    <div class="text-lg font-bold text-white" id="stat-strongest-sub">-</div>
+                  </div>
+                  <div class="text-2xl font-black text-green-500/20">A+</div>
+                </div>
+
+                <div class="flex items-center justify-between p-3 bg-red-500/5 border border-red-500/10 rounded-lg">
+                  <div>
+                    <div class="text-[10px] text-red-400 uppercase font-bold">Critical Weakness</div>
+                    <div class="text-lg font-bold text-white" id="stat-weakest-sub">-</div>
+                  </div>
+                  <div class="text-2xl font-black text-red-500/20">F</div>
+                </div>
+
+                <div class="h-32 w-full mt-4">
+                  <canvas id="stats-performance-chart"></canvas>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          <div class="card rounded-2xl p-6 mt-6">
+            <div class="flex items-center justify-between mb-4 border-b border-white/5 pb-2">
+              <h3 class="text-sm font-bold text-gray-300 uppercase tracking-wider">Monthly Focus Heatmap</h3>
+              <div class="flex items-center gap-2">
+                <button id="ypt-prev-btn"
+                  class="p-1 hover:bg-white/10 rounded text-gray-400 hover:text-white transition-colors">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="m15 18-6-6 6-6" />
+                  </svg>
+                </button>
+                <span id="ypt-month-label"
+                  class="text-sm font-bold font-mono min-w-[100px] text-center">Loading...</span>
+                <button id="ypt-next-btn"
+                  class="p-1 hover:bg-white/10 rounded text-gray-400 hover:text-white transition-colors">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="m9 18 6-6-6-6" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-7 mb-2 text-center max-w-[500px] mx-auto w-full">
+              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Mon</div>
+              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Tue</div>
+              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Wed</div>
+              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Thu</div>
+              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Fri</div>
+              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Sat</div>
+              <div class="text-center text-[10px] text-gray-500 font-bold uppercase">Sun</div>
+            </div>
+
+            <div id="ypt-grid" class="grid grid-cols-7 gap-1">
+            </div>
+          </div>
+
+          <div class="card rounded-2xl p-6">
+            <h3 class="text-sm font-bold text-gray-300 uppercase tracking-wider mb-4 flex justify-between items-center">
+              <span>30-Day Momentum</span>
+              <span class="text-[10px] bg-white/10 px-2 py-1 rounded text-gray-400" id="stat-total-trend">Total:
+                0h</span>
+            </h3>
+            <div class="h-64 w-full">
+              <canvas id="stats-trend-chart"></canvas>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <div id="view-calendar" class="view-section hidden animate-fade-in-down h-full">
+        <div class="flex flex-col h-[600px] md:h-[calc(100vh-140px)] max-h-[900px] card rounded-2xl overflow-hidden">
+
+          <div class="flex items-center justify-between p-4 border-b border-white/10 bg-black/20">
+            <h2 class="text-xl font-bold text-white flex items-center gap-2">
+              <span id="cal-month-name">February</span>
+              <span id="cal-year-name" class="text-gray-500 font-normal">2026</span>
+            </h2>
+            <div class="flex items-center gap-1">
+              <button id="cal-prev-btn"
+                class="p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                  stroke-linecap="round" stroke-linejoin="round">
+                  <path d="m15 18-6-6 6-6" />
+                </svg>
+              </button>
+              <button id="cal-today-btn"
+                class="px-3 py-1.5 text-xs font-bold bg-white/10 hover:bg-white/20 rounded-lg text-white transition-colors mx-1">
+                Today
+              </button>
+              <button id="cal-next-btn"
+                class="p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                  stroke-linecap="round" stroke-linejoin="round">
+                  <path d="m9 18 6-6-6-6" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-7 border-b border-white/10 bg-black/10">
+            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Mon</div>
+            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Tue</div>
+            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Wed</div>
+            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Thu</div>
+            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Fri</div>
+            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Sat</div>
+            <div class="text-center py-2 text-[10px] uppercase font-bold text-gray-500">Sun</div>
+          </div>
+
+          <div id="calendar-grid" class="flex-grow grid grid-cols-7 grid-rows-5 overflow-y-auto">
+          </div>
+        </div>
+      </div>
+
+      <div id="day-editor-modal"
+        class="modal-overlay hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
+        <div
+          class="card w-full max-w-md bg-[var(--card-bg-color)] border border-[var(--border-color)] rounded-2xl shadow-2xl transform transition-all scale-100 opacity-100">
+          <div class="card-header flex justify-between items-center p-4 border-b border-white/10">
+            <h2 id="day-editor-title" class="text-lg font-bold text-white">Edit Tasks</h2>
+            <button id="close-day-editor" class="text-gray-400 hover:text-white">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M18 6 6 18" />
+                <path d="m6 6 12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="p-4">
+            <form id="day-editor-form" class="flex gap-2 mb-4">
+              <input type="text" placeholder="Add new task..." class="form-input flex-grow" required autocomplete="off">
+              <button type="submit" class="btn-primary px-4 py-2 text-sm font-bold rounded-lg">+</button>
+            </form>
+            <ul id="day-editor-list" class="space-y-2 max-h-[300px] overflow-y-auto custom-scrollbar p-1">
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <button id="exit-zen-btn"
+    class="hidden fixed top-4 right-4 bg-gray-800/50 hover:bg-gray-700/70 backdrop-blur-sm text-white font-bold p-2 rounded-full transition-colors z-50"
+    title="Exit Zen Mode" aria-label="Exit Zen Mode"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+      stroke-linejoin="round">
+      <line x1="18" y1="6" x2="6" y2="18"></line>
+      <line x1="6" y1="6" x2="18" y2="18"></line>
+    </svg></button>
+
+  <footer class="mt-16 border-t border-zinc-800 pt-8 pb-6 text-center">
+    <div class="flex flex-wrap justify-center gap-4 mb-6">
+      <a href="termsandconditions.html" style="color: var(--accent-color);"
+        class="px-1.5 py-1.5 rounded-full bg-zinc-900 border border-zinc-800 text-[10px] text-zinc-400 uppercase tracking-wide hover:border-indigo-500/50 hover:text-indigo-400 transition-colors">
+        Terms and Conditions
+      </a>
+      <a href="privacypolicy.html" style="color: var(--accent-color);"
+        class="px-1.5 py-1.5 rounded-full bg-zinc-900 border border-zinc-800 text-[10px] text-zinc-400 uppercase tracking-wide hover:border-indigo-500/50 hover:text-indigo-400 transition-colors">
+        Privacy Policy
+      </a>
+      <a href="https://discord.gg/c8xHpTfM" style="color: var(--accent-color);" target="_blank"
+        class="px-1.5 py-1.5 rounded-full bg-zinc-900 border border-[#5865F2]/20 text-[10px] text-[#5865F2] uppercase tracking-wide hover:text-white hover:border-indigo-500/50 transition-all flex items-center gap-2">
+        <svg class="w-3 h-3 fill-current" viewBox="0 0 127.14 96.36">
+          <path
+            d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.11,77.11,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22c1.24-23.28-3.28-47.54-18.9-72.15ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
+        </svg>
+        Discord
+      </a>
+    </div>
+    <p class="text-zinc-600 text-xs">
+      Built by <a href="https://github.com/svalordev" target="_blank" style="color: var(--accent-color);" class="
+        text-zinc-400 hover:text-white transition-colors underline decoration-dotted underline-offset-4">Shaurya
+        Pratap Singh</a>
+    </p>
+
+  </footer>
+
+  <template id="countdown-template">
+    <div class="card" data-card-id="countdown">
+      <div class="card-header">
+        <h2 class="text-lg font-semibold">Countdown</h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+      <div id="countdown-timer" class="flex justify-center space-x-2 sm:space-x-4 md:space-x-8 text-center py-2">
+        <div>
+          <div data-value="days" class="font-bold">00</div>
+          <div class="text-xs sm:text-sm text-secondary">Days</div>
+        </div>
+        <div>
+          <div data-value="hours" class="font-bold">00</div>
+          <div class="text-xs sm:text-sm text-secondary">Hours</div>
+        </div>
+        <div>
+          <div data-value="minutes" class="font-bold">00</div>
+          <div class="text-xs sm:text-sm text-secondary">Minutes</div>
+        </div>
+        <!-- <div>
+                    <div data-value="seconds" class="font-bold">00</div>
+                    <div class="text-xs sm:text-sm text-secondary">Seconds</div>
+                </div> -->
+      </div>
+    </div>
+  </template>
+
+  <template id="time-template">
+    <div class="card" data-card-id="time">
+      <div class="card-header">
+        <h2 class="text-lg font-semibold">Current Time</h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+      <div class="text-center py-2">
+        <div data-value="time" class="text-3xl font-bold tracking-wider">00:00:00 AM</div>
+        <div data-value="date" class="text-sm text-secondary">Sunday, August 17, 2025</div>
+      </div>
+    </div>
+  </template>
+
+  <template id="graph-template">
+    <div class="card" data-card-id="graph">
+      <div class="card-header">
+        <h2 class="text-lg font-semibold">Journey</h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+      <div class="graph-container no-scrollbar" id="contribution-graph"></div>
+      <div class="flex justify-center flex-wrap gap-x-4 gap-y-2 mt-4 text-xs text-secondary">
+        <div class="legend-item">
+          <div class="legend-color day-future"></div><span>Future</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color day-today"></div><span>Today</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color day-part-test"></div><span>Test</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color day-exam"></div><span>Exam</span>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <template id="tests-template">
+    <div class="card" data-card-id="tests">
+      <div class="card-header">
+        <h2 class="text-lg font-semibold">Test Planner</h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+      <form id="add-test-form" class="flex flex-col gap-3 mb-4">
+        <input type="date" name="date" class="form-input rounded-md p-2 w-full text-sm" required>
+        <input type="text" name="name" placeholder="Test Name" class="form-input rounded-md p-2 flex-grow text-sm"
+          required>
+        <button type="submit" class="btn-primary font-bold py-2 px-4 rounded-md transition-colors w-full text-sm">Add
+          Test</button>
+      </form>
+      <div id="test-list-container">
+        <h3 class="text-md font-semibold mb-2 border-b pb-1" style="border-color: var(--border-color);">Tests
+        </h3>
+        <ul id="test-list" class="space-y-2 max-h-48 overflow-y-auto no-scrollbar"></ul>
+      </div>
+    </div>
+  </template>
+
+  <template id="quote-template">
+    <div class="card flex flex-col h-full relative group" data-card-id="quote">
+
+      <div class="card-header">
+        <h2 class="text-lg font-semibold">Quote</h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+
+      <div id="quote-card-content"
+        class="flex-grow flex flex-col justify-center items-center text-center px-6 py-4 relative z-10">
+
+        <p id="quote"
+          class="text-lg md:text-xl leading-relaxed text-gray-200 font-serif italic mb-4 transition-opacity duration-300">
+          "Loading..."
+        </p>
+
+        <div class="w-12 h-[2px] bg-[var(--accent-color)] opacity-50 mb-4 rounded-full"></div>
+
+        <p id="author" class="text-xs font-bold uppercase tracking-widest text-gray-400">
+          ...
+        </p>
+
+      </div>
+
+      <div
+        class="absolute bottom-3 right-3 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-20">
+        <button
+          class="copy-quote-btn p-1.5 rounded bg-white/10 hover:bg-[var(--accent-color)] hover:text-white text-gray-400 transition-colors"
+          title="Copy">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+          </svg>
+        </button>
+        <button
+          class="refresh-quote-btn p-1.5 rounded bg-white/10 hover:bg-[var(--accent-color)] hover:text-white text-gray-400 transition-colors"
+          title="New Quote">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </template>
+
+  <template id="note-card-template">
+    <div class="card custom-card" data-card-type="note">
+      <div class="card-header">
+        <h2 class="text-lg font-semibold card-title">Note</h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <button class="delete-card-btn" title="Delete card" aria-label="Delete card"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 6h18"></path>
+              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+            </svg></button>
+          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+      <div class="text-sm card-content whitespace-pre-wrap"></div>
+    </div>
+  </template>
+
+  <template id="daily-tasks-template">
+    <div class="card custom-card flex flex-col h-full" data-card-type="daily-tasks">
+      <div class="card-header mb-0 flex-shrink-0">
+        <h2 class="text-lg font-semibold card-title">Daily Agenda</h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M3 6h18" />
+              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+            </svg></button>
+          <span class="drag-handle cursor-grab"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+
+      <div
+        class="flex items-center justify-between gap-2 px-3 py-2 mb-3 mt-1 bg-black/20 rounded-lg border border-white/5">
+        <button class="prev-day-btn p-1 text-gray-400 hover:text-white hover:bg-white/10 rounded transition-colors"
+          title="Previous Day">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m15 18-6-6 6-6" />
+          </svg>
+        </button>
+
+        <input type="date"
+          class="daily-date-selector bg-transparent border-none text-xs font-bold text-center text-white focus:ring-0 cursor-pointer tracking-wide">
+
+        <button class="next-day-btn p-1 text-gray-400 hover:text-white hover:bg-white/10 rounded transition-colors"
+          title="Next Day">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m9 18 6-6-6-6" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="card-content flex flex-col flex-grow min-h-0">
+        <div class="flex items-center gap-2 mb-3 flex-shrink-0 px-1">
+          <div class="progress-container flex-grow bg-gray-700/30 rounded-full h-1.5">
+            <div
+              class="progress-bar bg-[var(--accent-color)] h-1.5 rounded-full transition-all duration-500 shadow-[0_0_10px_rgba(var(--accent-color-rgb),0.4)]"
+              style="width: 0%"></div>
+          </div>
+          <span class="progress-text text-[10px] text-gray-400 font-bold">0%</span>
+        </div>
+
+        <ul class="daily-task-list space-y-2 overflow-y-auto no-scrollbar flex-grow min-h-0 pr-1"></ul>
+
+        <form class="add-daily-task-form flex gap-2 mt-3 pt-2 border-t border-white/5 flex-shrink-0">
+          <input type="text" placeholder="Add task for this day..."
+            class="form-input rounded-md p-2 w-full text-xs bg-black/20 focus:bg-black/40 transition-colors border-none focus:ring-1 focus:ring-[var(--accent-color)]"
+            required>
+          <button type="submit"
+            class="btn-primary py-1.5 px-3 rounded-md text-xs font-bold shadow-lg hover:shadow-[var(--accent-color)]/20 transition-all">+</button>
+        </form>
+
+        <div class="text-[9px] text-gray-600 text-center mt-1 font-mono opacity-40 flex-shrink-0">
+          Click circle to toggle • Click badge to prioritize
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <template id="todo-card-template">
+    <div class="card custom-card flex flex-col h-full" data-card-type="todo">
+      <div class="card-header mb-2 flex-shrink-0">
+        <h2 class="text-lg font-semibold card-title">Tasks</h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M3 6h18" />
+              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+            </svg></button>
+          <span class="drag-handle cursor-grab"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+
+      <div class="card-content flex flex-col flex-grow min-h-0">
+        <div class="flex items-center gap-2 mb-3 flex-shrink-0">
+          <div class="progress-container flex-grow bg-gray-700/30 rounded-full h-1.5">
+            <div
+              class="progress-bar bg-[var(--accent-color)] h-1.5 rounded-full transition-all duration-500 shadow-[0_0_10px_rgba(var(--accent-color-rgb),0.4)]"
+              style="width: 0%"></div>
+          </div>
+          <span class="progress-text text-[10px] text-gray-400 font-bold">0%</span>
+        </div>
+
+        <ul class="todo-list space-y-2 overflow-y-auto no-scrollbar flex-grow min-h-0 pr-1"></ul>
+
+        <form class="add-todo-form flex gap-2 mt-3 pt-2 border-t border-white/5 flex-shrink-0">
+          <input type="text" placeholder="Add new task..."
+            class="form-input rounded-md p-2 w-full text-xs bg-black/20 focus:bg-black/40 transition-colors border-none focus:ring-1 focus:ring-[var(--accent-color)]"
+            required>
+          <button type="submit"
+            class="btn-primary py-1.5 px-3 rounded-md text-xs font-bold shadow-lg hover:shadow-[var(--accent-color)]/20 transition-all">+</button>
+        </form>
+
+        <div class="text-[9px] text-gray-600 text-center mt-1 font-mono opacity-40 flex-shrink-0">
+          Click circle to toggle • Click badge to prioritize
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <template id="pomodoro-card-template">
+    <div class="card custom-card" data-card-type="pomodoro">
+      <div class="card-header">
+        <h2 class="text-lg font-semibold card-title">Pomodoro</h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <button class="delete-card-btn" title="Delete card" aria-label="Delete card"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 6h18"></path>
+              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+            </svg></button>
+          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+      <div class="card-content text-center">
+        <div class="flex justify-center gap-2 mb-4">
+          <button data-mode="pomodoro"
+            class="pomodoro-btn text-sm px-3 py-1 rounded-md border border-transparent hover:border-gray-500">Pomodoro</button>
+          <button data-mode="shortBreak"
+            class="pomodoro-btn text-sm px-3 py-1 rounded-md border border-transparent hover:border-gray-500">Short
+            Break</button>
+          <button data-mode="longBreak"
+            class="pomodoro-btn text-sm px-3 py-1 rounded-md border border-transparent hover:border-gray-500">Long
+            Break</button>
+        </div>
+        <div class="timer-display text-6xl font-bold my-4">25:00</div>
+        <div class="flex justify-center gap-4">
+          <button class="start-pause-btn btn-primary font-bold py-2 px-8 text-lg rounded-md">START</button>
+          <button class="reset-btn text-secondary hover:text-primary">Reset</button>
+        </div>
+        <div class="focus-status text-xs text-yellow-400 mt-2 h-4"></div>
+        <div class="pomodoro-settings mt-4 flex justify-center gap-4 items-center">
+          <label class="flex flex-col text-xs items-center">
+            Work
+            <input type="number" data-mode="pomodoro"
+              class="pomodoro-duration-input form-input w-16 text-center rounded-md p-1" min="1">
+          </label>
+          <label class="flex flex-col text-xs items-center">
+            Short
+            <input type="number" data-mode="shortBreak"
+              class="pomodoro-duration-input form-input w-16 text-center rounded-md p-1" min="1">
+          </label>
+          <label class="flex flex-col text-xs items-center">
+            Long
+            <input type="number" data-mode="longBreak"
+              class="pomodoro-duration-input form-input w-16 text-center rounded-md p-1" min="1">
+          </label>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <template id="youtube-card-template">
+    <div class="card custom-card" data-card-type="youtube">
+      <div class="card-header">
+        <h2 class="text-lg font-semibold card-title">YouTube</h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size" aria-label="Toggle card size"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <button class="delete-card-btn" title="Delete card" aria-label="Delete card"><svg
+              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 6h18"></path>
+              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+            </svg></button>
+          <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+      <div class="card-content">
+        <div class="aspect-w-16 mb-3 youtube-container">
+          <iframe class="youtube-iframe w-full h-full" title="Embedded YouTube video player" src="" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen></iframe>
+        </div>
+        <form class="update-youtube-form flex gap-2">
+          <label for="youtube-url-input" class="sr-only">YouTube URL</label>
+          <input type="text" id="youtube-url-input" name="url" placeholder="Paste YouTube URL..."
+            class="form-input rounded-md p-2 w-full text-sm" required>
+          <button type="submit" class="btn-primary font-bold py-2 px-3 rounded-md text-sm">Load</button>
+        </form>
+      </div>
+    </div>
+  </template>
+
+  <template id="time-logger-card-template">
+    <div class="card custom-card" data-card-type="time-logger">
+      <div class="card-header">
+        <h2 class="text-lg font-semibold card-title">Study Logger</h2>
+        <div class="card-header-controls">
+          <button class="pip-btn" title="Show in floating window">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12.75 4.75h-8.5a2 2 0 0 0-2 2v8.5a2 2 0 0 0 2 2h8.5a2 2 0 0 0 2-2v-8.5a2 2 0 0 0-2-2Z" />
+              <path d="M19.25 8.75h-8.5a2 2 0 0 1-2-2v-2.5" />
+              <path d="M17.5 15.5V14" />
+              <path d="m15 12 5 5" />
+            </svg>
+          </button>
+          <button class="toggle-colspan-btn" title="Toggle size">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg>
+          </button>
+          <button class="toggle-fullwidth-btn" title="Full width">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 3h18v18H3z"/>
+              <path d="M3 12h18"/>
+            </svg>
+          </button>
+          <button class="delete-card-btn" title="Delete card">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 6h18" />
+              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+            </svg>
+          </button>
+          <span class="drag-handle">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg>
+          </span>
+        </div>
+      </div>
+      <div class="card-content text-center">
+        <div class="timer-display text-5xl font-bold my-4 tabular-nums">00:00:00</div>
+        <div class="focus-status text-xs text-yellow-400 mb-2 h-4"></div>
+
+        <div class="flex flex-col sm:flex-row gap-2 mb-4 items-center justify-center">
+          <label class="text-sm text-secondary sr-only sm:not-sr-only">Subject:</label>
+          <select class="subject-select form-input rounded-md p-2 text-sm flex-grow"></select>
+        </div>
+
+        <div class="flex justify-center gap-4">
+          <button class="start-pause-btn btn-primary font-bold py-2 px-8 text-lg rounded-md">START</button>
+          <button class="log-btn btn-primary font-bold py-2 px-8 text-lg rounded-md">LOG</button>
+          <button class="reset-btn text-secondary hover:text-primary">Reset</button>
+        </div>
+
+        <p class="log-message text-red-500 text-xs mt-2 h-4"></p>
+        <div class="w-full border-t border-[var(--border-color)] my-3"></div>
+
+        <div class="flex justify-between items-center mb-2">
+          <h3 class="text-md font-semibold text-left">Today's Log</h3>
+          <span class="total-study-time text-sm font-bold text-secondary"></span>
+        </div>
+
+        <ul class="study-log-list space-y-2 max-h-32 overflow-y-auto no-scrollbar text-left text-sm"></ul>
+
+        <div class="manual-entry-container mt-4 pt-2 border-t border-gray-700/50">
+          <button
+            class="toggle-manual-form text-xs text-secondary hover:text-white flex items-center gap-1 mx-auto transition-colors">
+            <span>+ Add Manual Entry</span>
+          </button>
+          <form class="manual-log-form hidden flex flex-col gap-2 mt-2">
+            <div class="flex gap-2">
+              <select class="manual-subject-select form-input rounded p-1.5 text-xs bg-gray-800 flex-grow"
+                required></select>
+              <input type="number" name="minutes" placeholder="Mins"
+                class="form-input rounded p-1.5 text-xs w-16 bg-gray-800 text-center" min="1" required>
+              <button type="submit" class="btn-primary text-xs px-3 py-1 rounded font-bold">Add</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </template>
+
+
+  <template id="analytics-card-template">
+    <div class="card custom-card" data-card-type="analytics">
+      <div class="card-header">
+        <h2 class="text-lg font-semibold card-title">Study Analytics</h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M3 6h18"></path>
+              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+            </svg></button>
+          <span class="drag-handle"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+              fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+      <div class="card-content">
+        <div class="flex justify-center gap-2 mb-4">
+          <button data-range="7" class="range-btn text-sm px-3 py-1 rounded-md border active"
+            style="border-color: var(--accent-color); background-color: var(--accent-color); color: white;">Last
+            7 Days</button>
+          <button data-range="30"
+            class="range-btn text-sm px-3 py-1 rounded-md border border-gray-600 text-secondary hover:text-primary">Last
+            30 Days</button>
+        </div>
+        <div class="h-64 relative">
+          <canvas class="analytics-chart"></canvas>
+        </div>
+        <div class="mt-4 flex flex-wrap justify-center gap-4 text-xs text-secondary statistics-summary">
+          <!-- Stats injected here via JS -->
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <template id="ambient-card-template">
+    <div class="card custom-card" data-card-type="ambient">
+      <div class="card-header">
+        <h2 class="text-lg font-semibold card-title">Soundscapes</h2>
+        <div class="card-header-controls flex items-center gap-1">
+          <button class="ambient-toggle-btn mr-1 text-gray-400 hover:text-white transition-colors"
+            title="Play/Pause All">
+            <svg class="play-icon w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polygon points="5 3 19 12 5 21 5 3"></polygon>
+            </svg>
+            <svg class="pause-icon w-4 h-4 hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="6" y="4" width="4" height="16"></rect>
+              <rect x="14" y="4" width="4" height="16"></rect>
+            </svg>
+          </button>
+
+          <button class="toggle-colspan-btn" title="Toggle size">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg>
+          </button>
+          <button class="toggle-fullwidth-btn" title="Full width">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 3h18v18H3z"/>
+              <path d="M3 12h18"/>
+            </svg>
+          </button>
+          <button class="delete-card-btn" title="Delete card">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 6h18" />
+              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+            </svg>
+          </button>
+          <span class="drag-handle cursor-grab">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg>
+          </span>
+        </div>
+      </div>
+      <div class="card-content flex flex-col gap-4 py-2">
+        <div class="sound-control group">
+          <div class="flex justify-between text-xs text-secondary mb-1">
+            <span class="group-hover:text-white transition-colors">🌧️ Rain</span>
+            <span class="opacity-0 group-hover:opacity-100 transition-opacity">Pink</span>
+          </div>
+          <input type="range" data-type="pink" min="-60" max="-10" value="-60"
+            class="ambient-slider w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+        </div>
+        <div class="sound-control group">
+          <div class="flex justify-between text-xs text-secondary mb-1">
+            <span class="group-hover:text-white transition-colors">⚡ Thunder</span>
+            <span class="opacity-0 group-hover:opacity-100 transition-opacity">Brown</span>
+          </div>
+          <input type="range" data-type="brown" min="-60" max="-10" value="-60"
+            class="ambient-slider w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+        </div>
+        <div class="sound-control group">
+          <div class="flex justify-between text-xs text-secondary mb-1">
+            <span class="group-hover:text-white transition-colors">🌊 Stream</span>
+            <span class="opacity-0 group-hover:opacity-100 transition-opacity">White</span>
+          </div>
+          <input type="range" data-type="white" min="-60" max="-20" value="-60"
+            class="ambient-slider w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <div id="add-card-modal" class="modal-overlay hidden">
+    <div class="card w-11/12 max-w-md">
+      <h2 class="text-xl font-semibold mb-4">Add New Card</h2>
+      <form id="new-card-form" class="flex flex-col h-full">
+        <input type="hidden" id="new-card-type" value="note">
+
+        <div class="flex-1 overflow-y-auto pr-2 mb-4 custom-scrollbar" style="max-height: 400px;">
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3" id="card-type-grid">
+            <div
+              class="card-option active p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
+              data-value="note">
+              <div class="flex items-center gap-2">
+                <svg class="text-blue-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                </svg>
+                <span class="font-bold text-sm">Note</span>
+              </div>
+              <p class="text-xs text-gray-400">Simple text area for scratchpad or reminders.</p>
+            </div>
+
+            <div
+              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
+              data-value="todo">
+              <div class="flex items-center gap-2">
+                <svg class="text-green-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
+                  <path d="m9 12 2 2 4-4" />
+                </svg>
+                <span class="font-bold text-sm">To-Do List</span>
+              </div>
+              <p class="text-xs text-gray-400">Task management with subtasks and priority.</p>
+            </div>
+
+            <div
+              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
+              data-value="daily-tasks">
+              <div class="flex items-center gap-2">
+                <svg class="text-purple-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+                  <line x1="16" y1="2" x2="16" y2="6"></line>
+                  <line x1="8" y1="2" x2="8" y2="6"></line>
+                  <line x1="3" y1="10" x2="21" y2="10"></line>
+                </svg>
+                <span class="font-bold text-sm">Calendar Tasks</span>
+              </div>
+              <p class="text-xs text-gray-400">Date-specific tasks with progress tracking.</p>
+            </div>
+
+            <div
+              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
+              data-value="pomodoro">
+              <div class="flex items-center gap-2">
+                <svg class="text-red-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+                <span class="font-bold text-sm">Pomodoro</span>
+              </div>
+              <p class="text-xs text-gray-400">Focus timer with short and long breaks.</p>
+            </div>
+
+            <div
+              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
+              data-value="time-logger">
+              <div class="flex items-center gap-2">
+                <svg class="text-yellow-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+                <span class="font-bold text-sm">Study Logger</span>
+              </div>
+              <p class="text-xs text-gray-400">Track subject-wise study hours.</p>
+            </div>
+
+            <div
+              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
+              data-value="line-graph">
+              <div class="flex items-center gap-2">
+                <svg class="text-indigo-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+                </svg>
+                <span class="font-bold text-sm">Marks Graph</span>
+              </div>
+              <p class="text-xs text-gray-400">Visualize test scores and trends.</p>
+            </div>
+            <div
+              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
+              data-value="analytics">
+              <div class="flex items-center gap-2">
+                <svg class="text-cyan-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M12 20V10" />
+                  <path d="M18 20V4" />
+                  <path d="M6 20v-4" />
+                </svg>
+                <span class="font-bold text-sm">Analytics</span>
+              </div>
+              <p class="text-xs text-gray-400">Bar chart of study hours over time.</p>
+            </div>
+
+            <div
+              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
+              data-value="ambient">
+              <div class="flex items-center gap-2">
+                <svg class="text-gray-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M17.5 19c0-1.7-1.3-3-3-3s-3 1.3-3 3c0-1.7-1.3-3-3-3s-3 1.3-3 3" />
+                  <path d="M3 19V5c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                </svg>
+                <span class="font-bold text-sm">Soundscapes</span>
+              </div>
+              <p class="text-xs text-gray-400">White, brown, and pink noise.</p>
+            </div>
+
+            <div
+              class="card-option p-3 rounded-xl border border-gray-700 bg-white/5 hover:bg-white/10 cursor-pointer transition-all flex flex-col gap-2"
+              data-value="youtube">
+              <div class="flex items-center gap-2">
+                <svg class="text-red-500" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path
+                    d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
+                  <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
+                </svg>
+                <span class="font-bold text-sm">YouTube</span>
+              </div>
+              <p class="text-xs text-gray-400">Embed lectures or lofi music.</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="border-t border-gray-700 pt-4 mt-2">
+          <label for="new-card-title" class="sr-only">Card Title</label>
+          <input type="text" id="new-card-title" placeholder="Card Title"
+            class="form-input rounded-md p-2 w-full mb-3 text-sm bg-black/40 border-gray-600 focus:border-indigo-500"
+            required>
+
+          <label for="new-card-content" class="sr-only">Card Content</label>
+          <textarea id="new-card-content" placeholder="Card Content" rows="3"
+            class="form-input rounded-md p-2 w-full mb-4 text-sm bg-black/40 border-gray-600 focus:border-indigo-500 resize-none"></textarea>
+
+          <div class="flex justify-end gap-3">
+            <button type="button" id="cancel-add-card"
+              class="bg-gray-700 hover:bg-gray-600 text-white text-sm font-bold py-2 px-4 rounded-md transition-colors">Cancel</button>
+            <button type="submit"
+              class="btn-primary text-sm font-bold py-2 px-4 rounded-md shadow-lg shadow-indigo-500/20">Add
+              Card</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <div id="customize-modal" class="modal-overlay hidden">
+    <div class="card w-11/12 max-w-4xl h-[80vh] flex flex-col p-0 overflow-hidden relative shadow-2xl">
+
+      <div class="flex justify-between items-center px-6 py-4 border-b border-gray-700/50 bg-black/20">
+        <h2 class="text-xl font-bold tracking-tight flex items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="3"></circle>
+            <path
+              d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
+            </path>
+          </svg>
+          Settings
+        </h2>
+        <button id="close-customize" class="text-secondary hover:text-white transition-colors p-1">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+        <button id="close-customize-icon-btn" class="hidden"></button>
+      </div>
+
+      <div class="flex flex-col md:flex-row flex-1 overflow-hidden">
+
+        <div
+          class="w-full md:w-56 bg-black/20 border-r border-gray-700/30 flex flex-row md:flex-col overflow-x-auto md:overflow-y-auto">
+          <button class="settings-nav-btn active" data-target="general">
+            <span>General</span>
+          </button>
+          <button class="settings-nav-btn" data-target="appearance">
+            <span>Appearance</span>
+          </button>
+          <button class="settings-nav-btn" data-target="features">
+            <span>Features</span>
+          </button>
+          <button class="settings-nav-btn" data-target="data">
+            <span>Data & Reset</span>
+          </button>
+          <button class="settings-nav-btn text-red-400 hover:text-red-300" data-target="developer">
+            <span>Developer</span>
+          </button>
+        </div>
+
+        <div class="flex-1 overflow-y-auto p-6 bg-black/10 relative">
+
+          <div id="panel-general" class="settings-panel space-y-6">
+            <div class="settings-group">
+              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Target
+                Exam</h3>
+              <div class="grid grid-cols-2 gap-3 mb-3">
+                <div>
+                  <label class="text-xs text-secondary mb-1 block">Exam</label>
+                  <select id="exam-type-select" class="form-input text-sm w-full">
+                    <option value="JEE">JEE Main</option>
+                    <option value="NEET">NEET</option>
+                    <option value="Custom">Custom</option>
+                  </select>
+                </div>
+                <div>
+                  <label class="text-xs text-secondary mb-1 block">Year</label>
+                  <select id="exam-year-select" class="form-input text-sm w-full">
+                    <option value="2026">2026</option>
+                    <option value="2027">2027</option>
+                    <option value="2028">2028</option>
+                  </select>
+                </div>
+              </div>
+
+              <div id="jee-details-container"
+                class="p-3 rounded-lg border border-dashed border-gray-700 bg-black/20 hidden">
+                <div class="grid grid-cols-2 gap-3">
+                  <div><label class="text-xs text-secondary mb-1 block">Session</label><select id="jee-session-select"
+                      class="form-input text-sm w-full">
+                      <option value="January">January</option>
+                      <option value="April">April</option>
+                    </select></div>
+                  <div><label class="text-xs text-secondary mb-1 block">Shift Date</label><input type="date"
+                      id="jee-shift-input" class="form-input text-sm w-full"></div>
+                </div>
+              </div>
+
+              <div id="custom-exam-container"
+                class="p-3 rounded-lg border border-dashed border-gray-700 bg-black/20 hidden">
+                <div class="space-y-3">
+                  <div><label class="text-xs text-secondary mb-1 block">Name</label><input type="text"
+                      id="custom-exam-name" placeholder="e.g. BITSAT" class="form-input text-sm w-full"></div>
+                  <div><label class="text-xs text-secondary mb-1 block">Date</label><input type="date"
+                      id="custom-exam-date" class="form-input text-sm w-full"></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="settings-group">
+              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Add Custom
+                Subjects</h3>
+              <div id="subject-manager-list"
+                class="flex flex-wrap gap-2 mb-3 min-h-[40px] p-2 rounded-lg border border-gray-700/50 bg-black/20">
+                <span class="text-xs text-gray-500 italic p-1">Loading...</span>
+              </div>
+              <div class="flex gap-2">
+                <input type="text" id="new-subject-input" placeholder="Add new subject..."
+                  class="form-input text-sm w-full">
+                <button id="add-subject-btn"
+                  class="btn-primary px-4 py-2 font-bold text-xs whitespace-nowrap">Add</button>
+              </div>
+            </div>
+          </div>
+
+          <div id="panel-appearance" class="settings-panel hidden space-y-6">
+            <div class="settings-group">
+              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Interface
+              </h3>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="text-xs text-secondary mb-1 block">Color Theme</label>
+                  <select id="theme-select" class="form-input text-sm w-full">
+                    <option value="default">Deep Space</option>
+                    <option value="cyberpunk">Cyberpunk</option>
+                    <option value="forest">Forest</option>
+                    <option value="rose-gold">Rose Gold</option>
+                    <option value="ocean">Ocean</option>
+                    <option value="sunset">Sunset</option>
+                    <option value="dracula">Dracula</option>
+                    <option value="coffee">Coffee Break</option>
+                    <option value="nordic">Nordic Frost</option>
+                    <option value="lavender">Lavender Haze</option>
+                    <option value="crimson">Crimson Elite</option>
+                    <option value="alakh-pandey" class="hidden">Alakh Pandey</option>
+                  </select>
+                </div>
+                <div>
+                  <label class="text-xs text-secondary mb-1 block">Typography</label>
+                  <select id="font-select" class="form-input text-sm w-full">
+                    <option value="'Inter', sans-serif">Inter (Default)</option>
+                    <option value="'Poppins', sans-serif">Poppins (Modern)</option>
+                    <option value="'Space Grotesk', sans-serif">Space Grotesk (Sci-Fi)</option>
+                    <option value="'Oswald', sans-serif">Oswald (Condensed)</option>
+                    <option value="'Roboto Slab', serif">Roboto Slab (Serif)</option>
+                    <option value="'Fira Code', monospace">Fira Code (Code)</option>
+                    <option value="'JetBrains Mono', monospace">JetBrains Mono (Dev)</option>
+                    <option value="'Comic Neue', cursive">Comic Sans</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            <div class="settings-group">
+              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Background
+              </h3>
+              <div class="grid grid-cols-4 gap-2 mb-4" id="preset-wallpaper-grid"></div>
+
+              <div class="flex gap-2">
+                <input type="text" id="bg-image-url" placeholder="Custom Image URL..."
+                  class="form-input text-xs w-full">
+                <button id="remove-bg-btn"
+                  class="bg-red-600/80 hover:bg-red-600 text-white px-3 rounded-md transition-colors">✕</button>
+              </div>
+            </div>
+          </div>
+
+          <div id="panel-features" class="settings-panel hidden space-y-6">
+
+            <div class="settings-group mb-6">
+              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Performance</h3>
+              <div class="space-y-3">
+                <label
+                  class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer border border-transparent hover:border-gray-600">
+                  <div>
+                    <span class="text-sm font-medium block">Lite Mode</span>
+                    <span class="text-[10px] text-secondary">Reduces blurs, shadows, and animations for older
+                      devices.</span>
+                  </div>
+                  <input type="checkbox" id="lite-mode-toggle" class="form-input-toggle">
+                </label>
+              </div>
+            </div>
+
+            <div class="settings-group">
+              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Focus &
+                Layout</h3>
+              <div class="space-y-3">
+
+
+                <label
+                  class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer border border-transparent hover:border-gray-600">
+                  <div>
+                    <span class="text-sm font-medium block">Focus Shield</span>
+                    <span class="text-[10px] text-secondary">Pauses timers if you switch
+                      tabs.</span>
+                  </div>
+                  <input type="checkbox" id="focus-shield-toggle" class="form-input-toggle">
+                </label>
+                <label
+                  class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer border border-transparent hover:border-gray-600">
+                  <div>
+                    <span class="text-sm font-medium block">Doom Tick</span>
+                    <span class="text-[10px] text-secondary">Plays a ticking sound every 60s.</span>
+                  </div>
+                  <input type="checkbox" id="ticking-sound-toggle" class="form-input-toggle">
+                </label>
+              </div>
+            </div>
+
+
+            <div class="settings-group">
+              <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider opacity-80">Media</h3>
+              <div class="space-y-3">
+                <label
+                  class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer border border-transparent hover:border-gray-600">
+                  <span class="text-sm">YouTube Tint</span>
+                  <input type="checkbox" id="youtube-tint-toggle" class="form-input-toggle">
+                </label>
+                <label
+                  class="flex items-center justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer border border-transparent hover:border-gray-600">
+                  <span class="text-sm">Blur Player</span>
+                  <input type="checkbox" id="youtube-blur-toggle" class="form-input-toggle">
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <div id="panel-data" class="settings-panel hidden flex flex-col h-full justify-center space-y-8">
+            <div class="text-center space-y-2">
+              <h3 class="text-lg font-bold text-white">Data Management</h3>
+              <p class="text-xs text-secondary max-w-xs mx-auto">Backup your progress locally or wipe the
+                slate clean.</p>
+            </div>
+
+            <div class="grid grid-cols-2 gap-4">
+              <button id="export-data-btn"
+                class="flex flex-col items-center justify-center p-6 rounded-xl bg-green-900/20 border border-green-700/50 hover:bg-green-900/40 hover:border-green-500 transition-all group">
+                <svg class="w-8 h-8 mb-3 text-green-500 group-hover:scale-110 transition-transform"
+                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                </svg>
+                <span class="font-bold text-green-400">Export JSON</span>
+              </button>
+
+              <button id="import-data-btn"
+                class="flex flex-col items-center justify-center p-6 rounded-xl bg-blue-900/20 border border-blue-700/50 hover:bg-blue-900/40 hover:border-blue-500 transition-all group">
+                <svg class="w-8 h-8 mb-3 text-blue-500 group-hover:scale-110 transition-transform"
+                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                </svg>
+                <span class="font-bold text-blue-400">Import JSON</span>
+              </button>
+            </div>
+
+            <div class="border-t border-gray-700/50 pt-8">
+              <button id="reset-dashboard-btn"
+                class="w-full flex items-center justify-center gap-2 p-4 rounded-xl bg-red-900/10 border border-red-900/30 hover:bg-red-900/30 hover:border-red-500/50 text-red-400 hover:text-red-300 transition-all">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M3 6h18" />
+                  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+                  <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+                </svg>
+                <span class="font-bold">Reset Dashboard Factory Settings</span>
+              </button>
+            </div>
+          </div>
+
+          <div id="panel-developer" class="settings-panel hidden space-y-4 h-full flex flex-col">
+            <div class="flex justify-between items-center">
+              <div>
+                <h3 class="text-sm font-bold text-red-400 uppercase tracking-wider">Settings Editor</h3>
+                <p class="text-[10px] text-gray-500">Edit raw application state. Incorrect values will break the app.
+                </p>
+              </div>
+              <button id="dev-save-btn"
+                class="btn-primary px-4 py-2 text-xs font-bold bg-red-600 hover:bg-red-700 border-red-500">
+                Save & Apply
+              </button>
+            </div>
+
+            <textarea id="dev-json-input"
+              class="flex-1 w-full bg-black/50 border border-gray-700 rounded-lg p-3 font-mono text-[10px] leading-relaxed text-green-400 focus:outline-none focus:border-red-500 resize-none custom-scrollbar"
+              spellcheck="false"></textarea>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <template id="line-graph-card-template">
+    <div class="card custom-card" data-card-type="line-graph">
+      <div class="card-header pb-2 border-b border-gray-700/30">
+        <h2 class="text-lg font-semibold card-title flex items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            style="color: var(--accent-color);">
+            <path d="M3 3v18h18" />
+            <path d="m19 9-5 5-4-4-3 3" />
+          </svg>
+          Progress Tracker
+        </h2>
+        <div class="card-header-controls">
+          <button class="toggle-colspan-btn" title="Toggle size"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M21 21l-6-6m6 6v-4m0 4h-4" />
+              <path d="M3 3l6 6" />
+              <path d="M3 3v4m0-4h4" />
+            </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
+          <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+              height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M3 6h18" />
+              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+            </svg></button>
+          <span class="drag-handle"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+              fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="9" cy="5" r="1" />
+              <circle cx="9" cy="19" r="1" />
+              <circle cx="15" cy="12" r="1" />
+              <circle cx="15" cy="5" r="1" />
+              <circle cx="15" cy="19" r="1" />
+            </svg></span>
+        </div>
+      </div>
+      <div class="card-content">
+        <div class="grid grid-cols-3 gap-2 mb-4 mt-1">
+          <div class="bg-white/5 rounded-lg p-2 text-center">
+            <div class="text-[10px] text-secondary uppercase tracking-wider">Average</div>
+            <div class="text-lg font-bold mean-score-display text-white">0</div>
+          </div>
+          <div class="bg-white/5 rounded-lg p-2 text-center">
+            <div class="text-[10px] text-secondary uppercase tracking-wider">Best</div>
+            <div class="text-lg font-bold max-score-display" style="color: var(--accent-color);">0</div>
+          </div>
+          <div class="bg-white/5 rounded-lg p-2 text-center">
+            <div class="text-[10px] text-secondary uppercase tracking-wider">Trend</div>
+            <div class="text-lg font-bold trend-display text-gray-400">-</div>
+          </div>
+        </div>
+
+        <div class="mb-4 h-56 relative w-full">
+          <canvas class="marks-chart"></canvas>
+        </div>
+
+        <div class="chart-toggles flex justify-center flex-wrap gap-2 mb-4">
+          <button data-subject="total"
+            class="text-[10px] px-3 py-1 rounded-full border transition-all font-semibold shadow-sm"
+            style="background-color: var(--accent-color); border-color: var(--accent-color); color: white;">Total</button>
+          <button data-subject="physics"
+            class="text-[10px] px-3 py-1 rounded-full border border-gray-600 bg-gray-800/50 text-secondary hover:text-white hover:border-blue-500 transition-all">Physics</button>
+          <button data-subject="chemistry"
+            class="text-[10px] px-3 py-1 rounded-full border border-gray-600 bg-gray-800/50 text-secondary hover:text-white hover:border-green-500 transition-all">Chemistry</button>
+          <button data-subject="maths"
+            class="text-[10px] px-3 py-1 rounded-full border border-gray-600 bg-gray-800/50 text-secondary hover:text-white hover:border-red-500 transition-all">Math/Bio</button>
+        </div>
+
+        <div class="mb-3">
+          <button
+            class="toggle-add-marks-form w-full text-xs text-secondary hover:text-white flex items-center justify-center gap-1 py-1 transition-colors">
+            + Add Test Score
+          </button>
+          <form class="add-marks-form grid grid-cols-4 gap-2 mt-2 hidden">
+            <input type="text" name="name" placeholder="Test Name"
+              class="form-input rounded p-2 text-xs col-span-4 bg-black/20" required>
+            <input type="number" name="phy" placeholder="Phy"
+              class="form-input rounded p-2 text-xs w-full text-center bg-black/20" required>
+            <input type="number" name="chem" placeholder="Chem"
+              class="form-input rounded p-2 text-xs w-full text-center bg-black/20" required>
+            <input type="number" name="math" placeholder="M/B"
+              class="form-input rounded p-2 text-xs w-full text-center bg-black/20" required>
+            <input type="number" name="maxMarks" placeholder="Total"
+              class="form-input rounded p-2 text-xs w-full text-center bg-black/20" required>
+            <button type="submit"
+              class="btn-primary font-bold py-1.5 rounded text-xs col-span-4 shadow-lg">Save</button>
+          </form>
+        </div>
+
+        <div class="mt-2">
+          <div class="flex justify-between items-center mb-2 px-1">
+            <h3 class="text-[10px] font-bold text-secondary uppercase tracking-widest">History</h3>
+            <div class="flex items-center gap-2 text-xs">
+              <label class="text-secondary text-[10px]">Target:</label>
+              <input type="number"
+                class="target-score-input bg-gray-800/50 border border-gray-700 rounded px-1 py-0.5 w-12 text-right text-white text-[10px]"
+                placeholder="0">
+            </div>
+          </div>
+          <ul class="marks-list space-y-2 max-h-32 overflow-y-auto pr-1 custom-scrollbar"></ul>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <div id="confirm-modal" class="modal-overlay hidden">
+    <div class="card w-11/12 max-w-sm">
+      <h2 id="confirm-title" class="text-xl font-semibold mb-2">Are you sure?</h2>
+      <p id="confirm-message" class="text-sm text-secondary mb-6"></p>
+      <div class="flex justify-end gap-3">
+        <button type="button" id="confirm-cancel-btn"
+          class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-md">Cancel</button>
+        <button type="button" id="confirm-ok-btn"
+          class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md">Confirm</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- <div id="mobile-alert"
+        class="fixed bottom-4 left-4 right-4 bg-yellow-400 text-black p-3 text-center text-sm rounded-lg flex justify-between items-center hidden z-50">
+        <span>Welcome to StudyLocus! This is your personalized JEE/NEET dashboard. Drag, drop, and click the '+' button
+            to add different cards to your space. Use the customise button to customise the dashboard to your liking.
+            For more details, check the Information tab.</span>
+        <button id="close-alert-btn" class="font-bold text-lg ml-4" aria-label="Close mobile alert">&times;</button>
+    </div>
+     -->
+
+  <div id="sign-in-modal" class="modal-overlay hidden flex items-center justify-center z-50">
+    <div class="card w-11/12 max-w-sm border border-[var(--border-color)] shadow-2xl">
+      <h2 class="text-xl font-bold mb-2 text-white text-center">Welcome!</h2>
+      <p class="text-xs text-secondary mb-6 text-center">Sign in to sync your study dashboard across all your devices +
+        access social features.</p>
+
+      <button id="google-sign-in-action-btn"
+        class="w-full flex items-center justify-center gap-3 bg-white hover:bg-gray-200 text-black font-bold py-2.5 px-4 rounded-lg transition-colors mb-4">
+        <svg class="w-5 h-5" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M47.532 24.552c0-1.566-.14-3.084-.404-4.548H24.5v8.58h12.944c-.566 2.76-2.213 5.108-4.72 6.708v5.524h7.112c4.162-3.832 6.596-9.42 6.596-16.264z"
+            fill="#4285F4" />
+          <path
+            d="M24.5 48c6.48 0 11.944-2.14 15.928-5.788l-7.112-5.524c-2.14 1.44-4.884 2.292-7.816 2.292-6.004 0-11.084-4.04-12.9-9.492H4.42v5.7c3.48 6.912 10.32 11.532 18.08 11.532l2 .28z"
+            fill="#34A853" />
+          <path
+            d="M11.6 28.98c-.34-.996-.54-2.052-.54-3.144s.2-2.148.54-3.144V16.992H4.42C2.852 20.04 2 23.436 2 27.024c0 3.588.852 6.984 2.42 10.032l7.18-5.7v-.376z"
+            fill="#FBBC05" />
+          <path
+            d="M24.5 9.8c3.516 0 6.66 1.212 9.128 3.54l6.32-6.32C36.44.88 30.98 0 24.5 0 16.74 0 9.9 4.62 6.42 11.532l7.18 5.7c1.816-5.452 6.896-9.432 12.9-9.432z"
+            fill="#EA4335" />
+        </svg>
+        Sign in with Google
+      </button>
+
+      <p class="text-[10px] text-gray-500 text-center px-2">
+        By continuing, you acknowledge and agree to our
+        <a href="termsandconditions.html" class="underline hover:text-white" target="_blank">Terms & Conditions</a> and
+        <a href="privacypolicy.html" class="underline hover:text-white" target="_blank">Privacy Policy</a>.
+      </p>
+
+      <div class="flex justify-end mt-4 pt-4 border-t border-gray-700/50">
+        <button id="close-sign-in-modal"
+          class="text-xs font-bold text-gray-400 hover:text-white transition-colors">Cancel</button>
+      </div>
+    </div>
+  </div>
+
+
+  <div id="info-modal" class="modal-overlay hidden">
+    <div class="card w-11/12 max-w-lg">
+      <!-- Tab Navigation -->
+      <nav class="tab-nav">
+        <button class="tab-btn active" data-tab="quick-start">Quick Start</button>
+        <button class="tab-btn" data-tab="whats-new">What's New</button>
+        <button class="tab-btn" data-tab="feedback">Feedback</button>
+        <button class="tab-btn" data-tab="about">About & Support</button>
+      </nav>
+
+      <!-- Tab Content Panels -->
+      <div>
+        <!-- Quick Start Panel -->
+        <div id="tab-quick-start" class="tab-content space-y-3 text-sm">
+          <button onclick="startTutorial()"
+            class="w-full mb-4 flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md font-bold transition-all">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10" />
+              <polygon points="10 8 16 12 10 16 10 8" />
+            </svg>
+            Take the Tour
+          </button>
+          <p><strong>YOU CAN NOW CHANGE DATE ACCORDING TO UR SHIFT IN CUSTOMISE MENU !!!</strong></p>
+          <p>Open "What's new" to see more changes !!!!</p>
+          <p>If you liked this update, follow me on <a href="https://github.com/svalordev" style="color:aqua"
+              target="_blank">github</a>!</p>
+          <p><strong>GOOD LUCK FOR YOUR PREPARATION ! 🫡</strong></p>
+          <p><strong>YOU CAN CHANGE JEE/NEET AND YEAR IN CUSTOMISE MENU</strong></p>
+
+        </div>
+
+        <!-- What's New Panel -->
+        <div id="tab-whats-new" class="tab-content hidden space-y-3 text-sm">
+          <h3 class="text-md font-bold text-primary">Version 1.5 (February 2026)</h3>
+          <ul class="list-disc list-inside text-secondary space-y-2">
+            <li>Revamped top bar</li>
+            <li>Introduced active user count</li>
+            <li>Made sign in process adhere to EU guidelines.</li>
+            <li>Introduced Lite Mode which improves performance.</li>
+          </ul>
+        </div>
+
+        <!-- Feedback Panel -->
+        <div id="tab-feedback" class="tab-content hidden space-y-4 text-sm text-center">
+          <p>Have an idea or found a bug? Join the community!</p>
+          <a href="https://discord.gg/c8xHpTfM" target="_blank" class="btn-primary inline-block"
+            style="padding: 10px;">Join the Discord
+            Server</a>
+          <p class="text-xs text-secondary">You can also submit feedback or report issues on the project's
+            GitHub page.</p>
+        </div>
+
+        <!-- About & Support Panel -->
+        <div id="tab-about" class="tab-content hidden space-y-3 text-sm">
+          <p><strong>Created by:</strong> <a href="https://github.com/svalordev" target="_blank">Shaurya
+              Pratap Singh</a></p><br>
+          <p><strong>Project Repository:</strong> <a href="https://github.com/SvalTech/studylocus/" target="_blank">View
+              on GitHub</a></p><br>
+          <div class="border-t border-gray-700 my-4"></div>
+          <p>Enjoying StudyLocus? Star the project repository on Github (link above), will greatly appreciate
+            it, Thanks!</p>
+          <p>+ This project will try to stay free to use + ads free perpetually :)</p>
+        </div>
+
+      </div>
+
+      <div class="flex justify-end mt-6">
+        <button type="button" id="close-info-modal"
+          class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-md">Close</button>
+      </div>
+    </div>
+  </div>
+  <div id="shortcuts-modal" class="modal-overlay hidden">
+    <div class="card w-11/12 max-w-sm">
+      <div class="card-header">
+        <h2 class="text-xl font-semibold">Keyboard Shortcuts</h2>
+        <div class="card-header-controls">
+          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs text-gray-300 font-mono">?</kbd>
+        </div>
+      </div>
+      <div class="space-y-3 mt-4 text-sm">
+        <div class="flex justify-between items-center border-b border-gray-700/50 pb-2">
+          <span class="text-secondary">Toggle Timer (Pomodoro/Log)</span>
+          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">Space</kbd>
+        </div>
+        <div class="flex justify-between items-center border-b border-gray-700/50 pb-2">
+          <span class="text-secondary">Zen Mode</span>
+          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">Z</kbd>
+        </div>
+        <div class="flex justify-between items-center border-b border-gray-700/50 pb-2">
+          <span class="text-secondary">Add New Card</span>
+          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">N</kbd>
+        </div>
+        <div class="flex justify-between items-center border-b border-gray-700/50 pb-2">
+          <span class="text-secondary">Customize Menu</span>
+          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">C</kbd>
+        </div>
+        <div class="flex justify-between items-center border-b border-gray-700/50 pb-2">
+          <span class="text-secondary">Super Focus Mode</span>
+          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">F</kbd>
+        </div>
+        <div class="flex justify-between items-center">
+          <span class="text-secondary">Close Modal / Blur Input</span>
+          <kbd class="px-2 py-1 bg-gray-700 rounded text-xs font-mono text-white">Esc</kbd>
+        </div>
+      </div>
+      <div class="flex justify-end mt-6">
+        <button type="button" id="close-shortcuts-modal" class="btn-primary font-bold py-2 px-4 rounded-md">Got
+          it</button>
+      </div>
+    </div>
+  </div>
+  <div class="fab-container">
+    <div class="fab-menu card p-2 space-y-1">
+      <h3 class="text-sm font-bold px-2 text-secondary">sval.tech</h3>
+      <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-gray-700/50">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect width="18" height="18" x="3" y="3" rx="2"></rect>
+          <path d="M7 3v18"></path>
+          <path d="M12 3v18"></path>
+          <path d="M17 3v18"></path>
+          <path d="M3 7.5h18"></path>
+          <path d="M3 12h18"></path>
+          <path d="M3 16.5h18"></path>
+        </svg>
+        <span>Dashboard</span>
+      </a>
+      <a href="https://svaltech.github.io/syllabustracker" target="_blank"
+        class="flex items-center gap-2 p-2 rounded-md hover:bg-gray-700/50">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
+          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
+          <path d="m10 14-2 2 2 2"></path>
+          <path d="m14 6-2 2 2 2"></path>
+        </svg>
+        <span>Syllabus Tracker</span>
+      </a>
+      <a href="https://svaltech.github.io/zenith" target="_blank"
+        class="flex items-center gap-2 p-2 rounded-md hover:bg-gray-700/50">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
+          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
+          <path d="m10 14-2 2 2 2"></path>
+          <path d="m14 6-2 2 2 2"></path>
+        </svg>
+        <span>Zenith</span>
+      </a>
+    </div>
+    <button
+      class="w-14 h-14 rounded-full bg-gray-800 shadow-lg flex items-center justify-center text-white hover:bg-gray-700 transition-colors"
+      aria-label="Toggle sval.tech products menu">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="3" width="7" height="7"></rect>
+        <rect x="14" y="3" width="7" height="7"></rect>
+        <rect x="14" y="14" width="7" height="7"></rect>
+        <rect x="3" y="14" width="7" height="7"></rect>
+      </svg>
+    </button>
+  </div>
+
+  <input type="file" id="import-file-input" class="hidden" accept=".json">
+
+  <div id="god-mode-panel" class="hidden fixed bottom-4 left-4 card p-4 w-64 z-50 space-y-3">
+    <h3 class="text-lg font-bold text-center" style="color: var(--accent-color);">-- GOD MODE --</h3>
+    <p class="text-xs text-secondary text-center">Ultimate power is now yours.</p>
+    <div class="border-t border-[var(--border-color)]"></div>
+    <div class="space-y-2">
+      <button id="god-mode-theme-btn"
+        class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md text-sm">Matrix
+        Theme</button>
+      <button id="god-mode-complete-tasks-btn"
+        class="w-full bg-sky-600 hover:bg-sky-700 text-white font-bold py-2 px-4 rounded-md text-sm">Complete
+        All Tasks</button>
+      <button id="god-mode-perfect-score-btn"
+        class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-md text-sm">Get
+        Perfect Score</button>
+      <button id="god-mode-timewarp-btn"
+        class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded-md text-sm">Time
+        Warp (+7 Days)</button>
+      <button id="god-mode-scramble-btn"
+        class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md text-sm">Scramble
+        Layout</button>
+      <button id="god-mode-nuke-btn"
+        class="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-2 px-4 rounded-md text-sm">NUKE</button>
+    </div>
+    <button id="god-mode-close-btn" class="absolute top-2 right-2 text-secondary hover:text-primary"
+      aria-label="Close God Mode Panel">&times;</button>
+  </div>
+
+  <div id="super-focus-overlay"
+    class="fixed inset-0 z-[9999] hidden flex flex-col bg-gray-900/95 backdrop-blur-xl transition-all duration-300 text-white font-sans selection:bg-indigo-500/30">
+
+    <div class="absolute top-0 left-0 right-0 p-6 flex justify-between items-center z-10">
+      <h1 class="text-2xl font-bold tracking-tighter hidden md:block select-none">sval.tech</h1>
+
+      <div class="flex bg-white/5 backdrop-blur-md rounded-full p-1 border border-white/10 shadow-lg">
+        <button class="focus-tab-btn active px-6 py-2 rounded-full text-sm font-medium transition-all hover:bg-white/10"
+          data-view="clock">Clock</button>
+        <button class="focus-tab-btn px-6 py-2 rounded-full text-sm font-medium transition-all hover:bg-white/10"
+          data-view="timer">Timer</button>
+        <button class="focus-tab-btn px-6 py-2 rounded-full text-sm font-medium transition-all hover:bg-white/10"
+          data-view="dashboard">Dashboard</button>
+      </div>
+
+      <div class="flex gap-3">
+        <button id="toggle-focus-fullscreen"
+          class="group flex items-center justify-center w-10 h-10 rounded-full bg-white/5 hover:bg-white/20 border border-white/10 transition-all"
+          title="Toggle Fullscreen">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+            <path d="M16 3h3a2 2 0 0 1 2 2v3" />
+            <path d="M8 21H5a2 2 0 0 1-2-2v-3" />
+            <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+          </svg>
+        </button>
+
+        <button id="exit-super-focus"
+          class="group flex items-center justify-center w-10 h-10 rounded-full bg-white/5 hover:bg-red-500/20 hover:text-red-400 border border-white/10 transition-all"
+          title="Exit Focus Mode">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div id="focus-view-clock"
+      class="focus-view flex-1 flex flex-col items-center justify-center text-center p-4 relative">
+      <div class="space-y-4 relative z-10">
+        <div id="focus-quote-display"
+          class="text-xl md:text-2xl font-serif italic text-white/80 max-w-2xl mx-auto leading-relaxed">
+          "Believe in yourself and your abilities!"
+        </div>
+        <div id="focus-clock-display"
+          class="text-[6rem] md:text-[10rem] font-bold tabular-nums leading-none tracking-tight text-white drop-shadow-2xl">
+          12:00
+        </div>
+        <div id="focus-date-display" class="text-lg md:text-xl text-white/60 uppercase tracking-widest font-medium">
+          Monday, January 1st
+        </div>
+      </div>
+    </div>
+
+    <div id="focus-view-timer" class="focus-view hidden flex-1 flex flex-col items-center justify-center p-4">
+      <div
+        class="bg-white/5 border border-white/10 rounded-[3rem] p-12 md:p-20 backdrop-blur-2xl shadow-2xl text-center relative overflow-hidden">
+        <div id="timer-pulse"
+          class="absolute inset-0 bg-indigo-500/10 opacity-0 transition-opacity duration-1000 pointer-events-none">
+        </div>
+
+        <div class="relative z-10">
+          <div class="flex justify-center gap-4 mb-8">
+            <button
+              class="timer-mode-btn active text-sm font-bold uppercase tracking-wider text-white/40 hover:text-white transition-colors"
+              data-mode="pomodoro">Pomodoro</button>
+            <span class="text-white/20">|</span>
+            <button
+              class="timer-mode-btn text-sm font-bold uppercase tracking-wider text-white/40 hover:text-white transition-colors"
+              data-mode="logger">Stopwatch</button>
+          </div>
+
+          <div id="focus-big-timer"
+            class="text-[5rem] md:text-[8rem] font-bold font-mono tabular-nums leading-none mb-8">
+            25:00
+          </div>
+
+          <div class="flex justify-center gap-6">
+            <button id="focus-timer-toggle"
+              class="w-32 py-4 bg-white/10 text-white font-bold rounded-2xl hover:bg-white/20 transition-all">START</button>
+            <button id="focus-timer-reset"
+              class="w-32 py-4 bg-white/10 text-white font-bold rounded-2xl hover:bg-white/20 transition-all">RESET</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="focus-view-dashboard" class="focus-view hidden flex-1 flex items-center p-6 md:p-12 overflow-hidden">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-7xl mx-auto h-[600px] max-h-[80vh]">
+
+        <div
+          class="bg-black/40 border border-white/10 rounded-3xl p-6 backdrop-blur-md flex flex-col hover:border-white/20 transition-colors">
+          <h3 class="text-white/90 font-bold mb-1 flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+            </svg>
+            Scratchpad
+          </h3>
+          <p class="text-xs text-white/40 mb-4">Quick notes disappear on refresh</p>
+          <textarea
+            class="flex-1 w-full bg-transparent resize-none outline-none text-white/80 placeholder-white/20 leading-relaxed text-sm font-mono"
+            placeholder="Jot down quick thoughts, formulas, or syllabus topics here..."></textarea>
+        </div>
+
+        <div
+          class="bg-white/5 border border-white/10 rounded-3xl p-6 backdrop-blur-xl flex flex-col items-center justify-center relative shadow-2xl hover:border-indigo-500/50 transition-colors">
+          <div class="text-center">
+            <div id="dashboard-timer-display" class="text-6xl font-bold font-mono tabular-nums mb-6">25:00
+            </div>
+            <div class="flex gap-3 justify-center">
+              <button id="dash-timer-toggle"
+                class="px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-lg transition-colors">Start</button>
+              <button id="dash-timer-reset"
+                class="px-6 py-2 bg-white/10 hover:bg-white/20 text-white font-bold rounded-lg transition-colors">Reset</button>
+            </div>
+            <div class="mt-6 text-xs text-white/40 uppercase tracking-widest">Focus Mode</div>
+          </div>
+        </div>
+
+        <div
+          class="bg-black/40 border border-white/10 rounded-3xl p-6 backdrop-blur-md flex flex-col hover:border-white/20 transition-colors">
+          <h3 class="text-white/90 font-bold mb-4 flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 11l3 3L22 4" />
+              <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
+            </svg>
+            Tasks
+          </h3>
+          <div class="flex-1 overflow-y-auto no-scrollbar pr-2">
+            <ul id="focus-dashboard-tasks" class="space-y-2">
+            </ul>
+          </div>
+          <div class="mt-4 pt-4 border-t border-white/10">
+            <input type="text" id="focus-dash-add-task" placeholder="Add task & press Enter..."
+              class="w-full bg-transparent outline-none text-sm text-white placeholder-white/30">
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+

+</body>
+
 </html>
\ No newline at end of file
diff --git a/studylocus/index.html b/studylocus/index.html
index 89a8683..4c36a3b 100644
--- a/studylocus/index.html
+++ b/studylocus/index.html
@@ -545,6 +545,12 @@ <h2 class="text-lg font-semibold">Countdown</h2>
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
               height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
@@ -590,6 +596,12 @@ <h2 class="text-lg font-semibold">Current Time</h2>
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
               height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
@@ -621,6 +633,12 @@ <h2 class="text-lg font-semibold">Journey</h2>
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
               height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
@@ -663,6 +681,12 @@ <h2 class="text-lg font-semibold">Test Planner</h2>
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
               height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
@@ -703,6 +727,12 @@ <h2 class="text-lg font-semibold">Quote</h2>
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <span class="drag-handle" aria-label="Drag to reorder"><svg xmlns="http://www.w3.org/2000/svg" width="16"
               height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
@@ -767,6 +797,12 @@ <h2 class="text-lg font-semibold card-title">Note</h2>
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <button class="delete-card-btn" title="Delete card" aria-label="Delete card"><svg
               xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -802,6 +838,12 @@ <h2 class="text-lg font-semibold card-title">Daily Agenda</h2>
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
               height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
@@ -883,6 +925,12 @@ <h2 class="text-lg font-semibold card-title">Tasks</h2>
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
               height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
@@ -942,6 +990,12 @@ <h2 class="text-lg font-semibold card-title">Pomodoro</h2>
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <button class="delete-card-btn" title="Delete card" aria-label="Delete card"><svg
               xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -1011,6 +1065,12 @@ <h2 class="text-lg font-semibold card-title">YouTube</h2>
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <button class="delete-card-btn" title="Delete card" aria-label="Delete card"><svg
               xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -1068,6 +1128,12 @@ <h2 class="text-lg font-semibold card-title">Study Logger</h2>
               <path d="M3 3v4m0-4h4" />
             </svg>
           </button>
+          <button class="toggle-fullwidth-btn" title="Full width">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 3h18v18H3z"/>
+              <path d="M3 12h18"/>
+            </svg>
+          </button>
           <button class="delete-card-btn" title="Delete card">
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -1146,6 +1212,12 @@ <h2 class="text-lg font-semibold card-title">Study Analytics</h2>
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
               height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
@@ -1209,6 +1281,12 @@ <h2 class="text-lg font-semibold card-title">Soundscapes</h2>
               <path d="M3 3v4m0-4h4" />
             </svg>
           </button>
+          <button class="toggle-fullwidth-btn" title="Full width">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 3h18v18H3z"/>
+              <path d="M3 12h18"/>
+            </svg>
+          </button>
           <button class="delete-card-btn" title="Delete card">
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -1732,6 +1810,12 @@ <h2 class="text-lg font-semibold card-title flex items-center gap-2">
               <path d="M3 3l6 6" />
               <path d="M3 3v4m0-4h4" />
             </svg></button>
+            <button class="toggle-fullwidth-btn" title="Full width">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3h18v18H3z"/>
+                <path d="M3 12h18"/>
+              </svg>
+            </button>
           <button class="delete-card-btn" title="Delete card"><svg xmlns="http://www.w3.org/2000/svg" width="16"
               height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
diff --git a/studylocus/src/main.js b/studylocus/src/main.js
index 9ffa388..4827ded 100644
--- a/studylocus/src/main.js
+++ b/studylocus/src/main.js
@@ -2517,6 +2517,8 @@ document.addEventListener("DOMContentLoaded", () => {
                 appState.cardProps[cardId] = cardProps;
                 if (cardProps.colspan === 2) {
                     cardElement.classList.add("md:col-span-2");
+                } else if (cardProps.colspan === 3) {
+                    cardElement.classList.add("md:col-span-3");  // add this
                 }
                 // Set title for custom cards
                 if (cardData) {
@@ -2738,6 +2740,16 @@ document.addEventListener("DOMContentLoaded", () => {
             appState.save("cardProps");
             renderDashboard();
         }
+
+        if (event.target.closest(".toggle-fullwidth-btn")) {
+            const cardProps = appState.cardProps[cardId] || { colspan: 1 };
+            cardProps.colspan = cardProps.colspan === 3 ? 1 : 3;
+            appState.cardProps[cardId] = cardProps;
+            appState.save("cardProps");
+            renderDashboard();
+        }
+
+
         // Delete custom card
         if (event.target.closest(".delete-card-btn") && cardData) {
             appState.customCards = appState.customCards.filter((card) => card.id !== cardId);