:root{--neon-purple: #ff00ff;--neon-blue: #00f0ff;--neon-pink: #fe53bb;--deep-blue: #0f1928;--darker-blue: #060818;--glow-purple: 0 0 10px rgba(255, 0, 255, .7);--glow-blue: 0 0 10px rgba(0, 240, 255, .7);--glow-pink: 0 0 10px rgba(254, 83, 187, .7);--grid-color: rgba(84, 6, 255, .5);--synthwave-gradient: linear-gradient(135deg, #0f1928 0%, #142138 100%);--card-gradient: linear-gradient(135deg, rgba(23, 21, 78, .8) 0%, rgba(42, 23, 99, .8) 100%);--accent-gradient: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));--button-gradient: linear-gradient(90deg, var(--neon-pink), var(--neon-purple))}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--darker-blue);color:#fff;background-image:linear-gradient(0deg,transparent 24%,var(--grid-color) 25%,var(--grid-color) 26%,transparent 27%,transparent 74%,var(--grid-color) 75%,var(--grid-color) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,var(--grid-color) 25%,var(--grid-color) 26%,transparent 27%,transparent 74%,var(--grid-color) 75%,var(--grid-color) 76%,transparent 77%,transparent);background-size:50px 50px}#root{display:flex;flex-direction:column}.app{max-width:600px;margin:0 auto;padding:20px;height:auto;position:relative;background-color:var(--deep-blue);background-image:var(--synthwave-gradient);box-shadow:0 0 30px #f0f3;border:1px solid rgba(255,0,255,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.container{padding-bottom:100px;flex-grow:1}h1,h2,h3{color:#fff;text-shadow:0 0 5px var(--neon-purple);letter-spacing:1px}h1{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent;font-weight:700;letter-spacing:2px;margin-bottom:30px;text-align:center}.section{margin-bottom:20px;padding:20px;background:var(--card-gradient);border-radius:12px;box-shadow:0 8px 32px #0000004d;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.today-goal{background:linear-gradient(135deg,rgba(23,21,78,.8) 0%,rgba(42,23,99,.8) 100%);padding:20px;border-radius:12px;margin-bottom:20px;border-left:4px solid var(--neon-purple);box-shadow:var(--glow-purple)}.accordion{border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;background-color:#0f192880}.accordion-header{background-color:#00f0ff1a;padding:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--neon-blue);text-shadow:0 0 5px rgba(0,240,255,.5);border-bottom:1px solid rgba(0,240,255,.3)}.accordion-content{padding:20px;border-top:1px solid rgba(255,255,255,.05);background-color:#0a0f1e99}.completed-item{padding:15px;border-bottom:1px solid rgba(255,255,255,.1);transition:all .3s ease}.completed-item:hover{background-color:#ff00ff1a}.completed-item:last-child{border-bottom:none}.completed-date{font-size:.8em;color:#aaa}.completed-time{font-weight:700;color:var(--neon-pink);text-shadow:0 0 5px rgba(254,83,187,.5)}.completed-skill{font-weight:700;color:var(--neon-blue);text-shadow:0 0 5px rgba(0,240,255,.5)}.record-button{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--button-gradient);color:#fff;border:none;padding:15px 30px;border-radius:30px;font-size:16px;font-weight:700;box-shadow:0 0 15px #ff00ffb3,0 4px 15px #00000080;cursor:pointer;transition:all .3s ease;letter-spacing:1px;text-transform:uppercase;width:80%;max-width:300px;pointer-events:auto;animation:glow 2s infinite;z-index:1000}.record-button:hover{transform:translate(-50%) scale(1.05);box-shadow:0 0 25px #ff00ffe6,0 4px 20px #0009}.sheet-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:10;display:flex;align-items:flex-end;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}.sheet-overlay.active{visibility:visible;opacity:1}.sheet{background:var(--synthwave-gradient);border-radius:20px 20px 0 0;border-top:1px solid rgba(255,0,255,.3);border-left:1px solid rgba(255,0,255,.3);border-right:1px solid rgba(255,0,255,.3);padding:25px;width:100%;max-height:85vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s ease-out;box-shadow:0 -5px 25px #f0f6}.sheet-overlay.active .sheet{transform:translateY(0)}.sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:15px}.sheet-title{font-size:20px;font-weight:700;color:var(--neon-blue);text-shadow:0 0 5px rgba(0,240,255,.7);letter-spacing:1px}.form-group{margin-bottom:20px}.form-label{display:block;margin-bottom:10px;font-weight:700;color:var(--neon-purple);letter-spacing:.5px}.form-input,.form-textarea,.form-select{width:100%;padding:15px;background-color:#0a0f1e99;border:1px solid rgba(255,0,255,.3);border-radius:8px;font-size:16px;color:#fff;transition:all .3s ease}.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--neon-blue);box-shadow:0 0 10px #00f0ff80}.form-textarea{min-height:100px;resize:vertical}.button-group{display:flex;justify-content:space-between;margin-top:25px}.button{padding:12px 24px;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;border:none;letter-spacing:1px;transition:all .3s ease}.button-primary{background:var(--button-gradient);color:#fff;box-shadow:0 0 15px #ff00ff80}.button-primary:hover{box-shadow:0 0 25px #f0fc;transform:translateY(-2px)}.button-secondary{background-color:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.button-secondary:hover{background-color:#fff3}.metrics-dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-bottom:20px}.metric-card{background:linear-gradient(135deg,rgba(30,30,70,.6) 0%,rgba(60,30,110,.6) 100%);padding:20px 15px;border-radius:12px;text-align:center;box-shadow:0 4px 20px #0000004d;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.metric-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #0006}.metric-value{font-size:28px;font-weight:700;color:var(--neon-blue);margin:10px 0;text-shadow:0 0 10px rgba(0,240,255,.7)}.metric-label{font-size:14px;color:#aaa;letter-spacing:.5px}.progress-bar-container{height:8px;background-color:#ffffff1a;border-radius:4px;margin-top:15px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple));border-radius:4px;box-shadow:0 0 10px #ff00ff80;transition:width .5s ease}.category-tag{display:inline-block;padding:3px 8px;border-radius:12px;font-size:12px;font-weight:700;margin-right:8px;text-shadow:0 0 5px rgba(0,0,0,.5)}.category-tag-html{background:linear-gradient(90deg,#00c6ff,#0072ff);color:#fff}.category-tag-js{background:linear-gradient(90deg,#ffcc00,#ff9500);color:#000}.category-tag-react{background:linear-gradient(90deg,#00ff9d,#00b8a9);color:#000}.category-tag-other{background:linear-gradient(90deg,#c074ff,#8a36ff);color:#fff}.category-legend{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;background:rgba(0,0,0,.2);padding:10px;border-radius:8px}.category-indicator{display:flex;align-items:center;gap:6px}.category-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 5px currentColor}.category-name{font-size:12px;opacity:.9}.category-header{margin:15px 0 10px;font-size:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;text-shadow:0 0 8px currentColor}::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,var(--neon-blue),var(--neon-purple));border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,var(--neon-pink),var(--neon-purple))}@keyframes glow{0%{box-shadow:0 0 5px currentColor}50%{box-shadow:0 0 15px currentColor}to{box-shadow:0 0 5px currentColor}}.record-button{animation:glow 2s infinite}button[type=button]:not(.button-secondary){background-color:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:6px;font-size:14px;transition:all .3s ease}button[type=button]:not(.button-secondary):hover{background-color:#fff3}button[type=submit],button[style*="backgroundColor: #4caf50"]{background:var(--button-gradient)!important;color:#fff!important;border:none!important;box-shadow:0 0 10px #ff00ff80!important;transition:all .3s ease!important}button[type=submit]:hover,button[style*="backgroundColor: #4caf50"]:hover{box-shadow:0 0 20px #f0fc!important;transform:translateY(-2px)!important}h1{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent;font-weight:700;letter-spacing:2px;margin-bottom:30px;text-align:center;cursor:pointer;position:relative;z-index:10;transition:all .3s ease}h1:hover{transform:scale(1.05);text-shadow:0 0 15px var(--neon-blue)}.particle-container{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .3s ease}.particle-container.active{opacity:1;visibility:visible;width:100%;height:100%}.particle{position:absolute;background:transparent;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}.particle:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:currentColor;filter:blur(8px)}.laser{position:absolute;height:2px;background:linear-gradient(90deg,transparent,currentColor,transparent);transform-origin:left center;pointer-events:none}.grid-flash{position:fixed;top:0;left:0;background:linear-gradient(transparent 24%,var(--grid-color) 25%,var(--grid-color) 26%,transparent 27%,transparent 74%,var(--grid-color) 75%,var(--grid-color) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,var(--grid-color) 25%,var(--grid-color) 26%,transparent 27%,transparent 74%,var(--grid-color) 75%,var(--grid-color) 76%,transparent 77%,transparent);background-size:50px 50px;opacity:0;pointer-events:none;z-index:9990}.grid-flash.active{animation:flashGrid 1.5s ease-out forwards}@keyframes flashGrid{0%{opacity:0;filter:brightness(1)}20%{opacity:1;filter:brightness(5)}to{opacity:0;filter:brightness(1)}}@keyframes fadeInOut{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}@keyframes moveUpDown{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-100px) scale(.5)}to{transform:translateY(-200px) scale(0)}}.synthwave-sun{position:fixed;bottom:-60px;left:50%;transform:translate(-50%);width:200px;height:120px;background:linear-gradient(0deg,var(--neon-pink),#ff0080);border-radius:100% 100% 0 0;filter:blur(10px);opacity:0;z-index:9995;pointer-events:none}.synthwave-sun:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(0deg,var(--neon-pink),#ff0080);border-radius:100% 100% 0 0;filter:blur(20px)}.synthwave-sun.active{animation:riseSun 2s ease-out forwards}@keyframes riseSun{0%{bottom:-60px;opacity:0;transform:translate(-50%) scale(.8)}30%{opacity:1;transform:translate(-50%) scale(1)}80%{bottom:20%;opacity:1}to{bottom:50%;opacity:0;transform:translate(-50%) scale(3)}}.retro-text{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0;font-weight:800;color:var(--neon-blue);text-shadow:0 0 20px var(--neon-blue);text-transform:uppercase;letter-spacing:5px;z-index:9996;opacity:0;pointer-events:none;white-space:nowrap}.retro-text.active{animation:retroTextReveal 2s ease forwards}@keyframes retroTextReveal{0%{opacity:0;font-size:0;letter-spacing:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;font-size:80px;letter-spacing:5px}25%{transform:translate(-50%,-50%) scale(1.1)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-50%) scale(2);letter-spacing:30px}}::-webkit-scrollbar{width:8px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}html,body,#root{height:100%}