.sidebar{position:fixed;right:-100%;top:0;height:100vh;width:280px;z-index:999;background:var(--sidebar-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-left:1px solid var(--glass-border);color:var(--text-light);display:flex;flex-direction:column;padding:24px 0;box-shadow:var(--shadow-lg);transition:right .3s ease}.sidebar-open{right:0}.sidebar-overlay{display:block!important}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:0 16px 24px 28px;border-bottom:1px solid var(--glass-border)}.close-sidebar-btn{display:block!important}.logo{border-bottom:none;padding:0}.logo a{padding:0;font-family:"Press Start 2P",cursive;font-weight:400;font-size:1.5rem;color:#fff;letter-spacing:0;border-bottom:none;background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;line-height:1.4}.nav-item{background:none;border:none;color:var(--text-muted);text-align:left;padding:14px 28px;margin:4px 12px;cursor:pointer;width:calc(100% - 24px);font-size:.95rem;font-weight:500;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.nav-item:hover{background:var(--hover);color:var(--text-light);transform:translate(4px)}.nav-item.active{background:var(--hover);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--accent);box-shadow:var(--shadow-glow);border-left:3px solid var(--accent)}.stats{margin-top:auto;padding:20px 24px;font-size:.8rem;color:var(--text-muted);border-top:1px solid var(--glass-border);background:#3b82f60d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}nav{margin-top:20px}@media(min-width:769px){.sidebar{position:static;right:auto;height:auto;width:auto;border-left:none;border-right:1px solid var(--glass-border);transition:none}.sidebar-open{right:auto}.sidebar-overlay{display:none!important}.sidebar-header{display:block;padding:0;border-bottom:none}.close-sidebar-btn{display:none!important}.logo{padding:0 28px 24px;border-bottom:1px solid var(--glass-border)}.logo a{font-size:1.5rem;padding:0;border-bottom:none}}.main-content{background:transparent;display:flex;flex-direction:column;height:100%;overflow:hidden}.main-header{padding:20px 60px 20px 24px;background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);box-shadow:var(--shadow-sm);position:relative}.main-header h1{font-size:1.5rem;font-weight:800;background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px}.date{color:var(--text-muted);font-size:.85rem}.mobile-menu-btn{display:block!important}.input-section{padding:16px 24px}.input-section>div{flex-direction:column;gap:12px}.input-section input,.input-section select,.input-section .date-input-wrapper{width:100%!important;flex:1 1 auto!important}.input-section input{padding:18px 24px;border:2px solid var(--glass-border);border-radius:16px;font-size:1rem;background:var(--bg-secondary);color:var(--text-main);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);transition:all .3s cubic-bezier(.4,0,.2,1)}.input-section input::placeholder{color:var(--text-muted)}.input-section input:focus{border-color:var(--accent);box-shadow:0 0 0 4px #3b82f633,var(--shadow-md);outline:none;transform:translateY(-2px)}.task-list-section{flex:1;overflow-y:auto;padding:0 24px 24px;min-height:0}.task-list-section::-webkit-scrollbar{width:8px}.task-list-section::-webkit-scrollbar-track{background:#3b82f60d;border-radius:10px}.task-list-section::-webkit-scrollbar-thumb{background:#3b82f64d;border-radius:10px}.task-list-section::-webkit-scrollbar-thumb:hover{background:#3b82f680}.task-list{list-style:none;display:flex;flex-direction:column;gap:12px}.task-row{background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;padding:14px 12px;border-radius:16px;border:1px solid var(--glass-border);box-shadow:var(--shadow-sm);transition:all .3s cubic-bezier(.4,0,.2,1);flex-wrap:wrap;animation:slideIn .3s ease-out}.drag-handle{cursor:grab!important;padding:0 4px!important;font-size:1rem!important}.drag-handle:active{cursor:grabbing!important}.task-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent);background:var(--bg-secondary)}.task-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;transition:transform .2s ease}.task-row input[type=checkbox]:hover{transform:scale(1.1)}.task-label{flex:1;margin:0 8px!important;font-size:.95rem;font-weight:500;color:var(--text-main);transition:all .3s ease}.completed{text-decoration:line-through;color:var(--text-muted);opacity:.6}.star-btn{background:none;border:none;cursor:pointer;font-size:1.2rem!important;padding:4px!important;line-height:1;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px}.star-btn:hover{transform:scale(1.2) rotate(15deg);background:#ffd70033}.delete-btn{background:none;border:none;color:#9ca3af;font-size:1.1rem!important;cursor:pointer;padding:4px 6px!important;border-radius:8px;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:700}.delete-btn:hover{background:#ef444426;color:var(--danger);transform:scale(1.1)}.nav-item,.star-btn,.delete-btn,.drag-handle{min-height:44px;min-width:44px}.task-row>div{min-width:0}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.task-category,.task-date{animation:fadeIn .3s ease-out}select{appearance:none;background-color:var(--bg-secondary);background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px!important;color:var(--text-main);border:2px solid var(--glass-border)}select:focus{border-color:var(--accent);box-shadow:0 0 0 4px #3b82f633;outline:none}input[type=date]{color:var(--text-main);background-color:var(--bg-secondary);border:2px solid var(--glass-border);min-width:150px;color-scheme:dark}input[type=date]:focus{border-color:var(--accent);box-shadow:0 0 0 4px #3b82f633;outline:none}input[type=date]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;width:100%;height:100%;cursor:pointer}input[type=date]{color:transparent}input[type=date].has-value{color:var(--text-main)}.date-input-wrapper{flex:0 0 auto;min-width:160px}.date-input-wrapper input[type=date]{width:100%}.add-task-btn{flex-shrink:0;width:100%}.empty-state{animation:fadeIn .5s ease-out}@media(min-width:769px){.main-header{padding:24px 32px}.main-header h1{font-size:1.75rem}.mobile-menu-btn{display:none!important}.input-section{padding:20px 32px}.input-section>div{flex-direction:row;gap:16px}.input-section input,.input-section select{width:auto!important;flex:1 1 auto!important}.input-section .date-input-wrapper{width:auto!important;flex:0 0 auto!important}.add-task-btn{width:auto}.task-list-section{padding:0 32px 32px}.task-row{padding:16px 18px;flex-wrap:nowrap}.drag-handle{padding:6px!important;font-size:1.2rem!important}.task-row input[type=checkbox]{width:20px;height:20px}.task-label{margin:0 12px!important;font-size:1rem}.star-btn{font-size:1.3rem!important;padding:6px!important}.delete-btn{font-size:1.2rem!important;padding:6px 8px!important}.task-row:hover{transform:translateY(-3px)}.nav-item,.star-btn,.delete-btn,.drag-handle{min-height:auto;min-width:auto}}@media(min-width:1025px){.main-header{padding:32px 48px}.main-header h1{font-size:2rem}.input-section{padding:24px 48px}.task-list-section{padding:0 48px 48px}.task-row{padding:18px 20px}.star-btn{font-size:1.4rem!important}.delete-btn{font-size:1.3rem!important}.task-label{margin:0 16px!important}.task-row:hover{transform:translateY(-4px)}}.app-footer{grid-column:1 / 2;height:40px;background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--text-muted);font-weight:500;box-shadow:0 -2px 10px #0003;padding:0 12px}.app-footer a{margin-left:4px;background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;font-weight:700;transition:transform .2s ease;display:inline-block}.app-footer a:hover{transform:scale(1.05)}@media(min-width:769px){.app-footer{grid-column:2 / 3;height:50px;font-size:.8rem;padding:0}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--sidebar-width: 0px;--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--gradient-accent: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);--gradient-subtle: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);--glass-bg: rgba(30, 41, 59, .5);--glass-border: rgba(148, 163, 184, .1);--card-bg: rgba(30, 41, 59, .8);--sidebar-glass: rgba(15, 23, 42, .95);--text-main: #f1f5f9;--text-muted: #94a3b8;--text-light: rgba(255, 255, 255, .95);--accent: #3b82f6;--accent-hover: #2563eb;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--border: rgba(148, 163, 184, .1);--hover: rgba(59, 130, 246, .1);--shadow-sm: 0 2px 10px rgba(0, 0, 0, .3);--shadow-md: 0 4px 20px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 40px rgba(0, 0, 0, .5);--shadow-glow: 0 0 30px rgba(59, 130, 246, .2)}html,body,#root{width:100%;height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}body{background:var(--bg-primary);position:relative}body:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(at 20% 30%,rgba(59,130,246,.08) 0px,transparent 50%),radial-gradient(at 80% 70%,rgba(139,92,246,.08) 0px,transparent 50%);pointer-events:none;z-index:0}.app-layout{display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;width:100%;height:100%;position:relative;z-index:1}@media(min-width:769px){:root{--sidebar-width: 280px}.app-layout{grid-template-columns:var(--sidebar-width) 1fr}}#root{width:100%;height:100%;margin:0;padding:0}