:root{--primary-color:#6366f1;--primary-hover:#4f46e5;--danger-color:#ef4444;--danger-hover:#dc2626;--text-main:#1e293b;--text-muted:#64748b;--border-color:#e2e8f0;--bg-card:#fff;--bg-page:#f8fafc;--bg-checked:#f8fafc;--bg-input:#f8fafc;--bg-glass:#ffffffbf;--bg-header:#ffffffd9;--shadow-sm:0 1px 3px #0000000d;--shadow-md:0 4px 6px -1px #00000014, 0 2px 4px -2px #00000014;--shadow-lg:0 10px 25px -5px #0000000d, 0 8px 10px -6px #0000000d;--font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}[data-theme=dark]{--primary-color:#818cf8;--primary-hover:#6366f1;--danger-color:#f87171;--danger-hover:#ef4444;--text-main:#e2e8f0;--text-muted:#94a3b8;--border-color:#334155;--bg-card:#1e293b;--bg-page:#0f172a;--bg-checked:#0f172a;--bg-input:#1e293b;--bg-glass:#0f172ad9;--bg-header:#0f172ad9;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 6px -1px #0006;--shadow-lg:0 10px 25px -5px #00000080}body{background-color:var(--bg-page);color:var(--text-main);font-family:var(--font-family);margin:0;padding-top:60px;transition:background-color .3s,color .3s}.header-container{background-color:var(--bg-header);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);z-index:1000;width:100%;height:70px;font-family:var(--font-family);transition:background-color .3s,border-color .3s;position:fixed;top:0;left:0}.header-content{justify-content:space-between;align-items:center;max-width:1200px;height:100%;margin:0 auto;padding:0 16px;display:flex}.header-brand{cursor:pointer;align-items:center;gap:10px;text-decoration:none;display:flex}.brand-icon{box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);border-radius:10px;justify-content:center;align-items:center;padding:8px;font-size:18px;transition:transform .2s;display:flex}[data-theme=dark] .brand-icon{background:linear-gradient(135deg,#1e3a5f 0%,#1a365d 100%)}.header-brand:hover .brand-icon{transform:scale(1.05)rotate(5deg)}.brand-name{color:var(--text-main);letter-spacing:-.025em;font-size:18px;font-weight:800}.header-nav{align-items:center;gap:32px;display:none}.nav-link{color:var(--text-muted);padding:6px 0;font-size:14px;font-weight:600;text-decoration:none;transition:color .2s;position:relative}.nav-link:hover,.nav-link.active{color:var(--text-main)}.nav-link:after{content:"";background-color:var(--primary-color);border-radius:2px;width:0;height:2px;transition:width .2s;position:absolute;bottom:0;left:0}.nav-link:hover:after,.nav-link.active:after{width:100%}.header-actions{align-items:center;gap:12px;display:flex}.theme-toggle{border:1.5px solid var(--border-color);background-color:var(--bg-card);width:40px;height:40px;color:var(--text-main);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;min-width:44px;min-height:44px;font-size:18px;transition:all .2s;display:flex}.theme-toggle:hover{border-color:var(--primary-color);background-color:var(--bg-input);transform:scale(1.05)}.theme-toggle:active{transform:scale(.95)}.btn-cta{background-color:var(--primary-color);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:10px 18px;font-size:13.5px;font-weight:600;transition:all .2s;box-shadow:0 4px 10px #3b82f626}.btn-cta:hover{background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #3b82f640}.btn-cta:active{transform:translateY(0)scale(.98)}.btn-logout{color:var(--text-muted);border:1px solid var(--border-color);cursor:pointer;white-space:nowrap;background-color:#0000;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex}.btn-logout:hover{color:var(--danger-color);border-color:var(--danger-color);background-color:#ef44440f}.btn-logout:before{content:"↩";font-size:13px}.mobile-logout{justify-content:center;width:100%;margin-top:4px;padding:12px}.burger-button{cursor:pointer;z-index:1010;background:0 0;border:none;flex-direction:column;justify-content:space-between;width:44px;height:44px;padding:13px 10px;display:flex}.burger-line{background-color:var(--text-main);transform-origin:0;border-radius:2px;width:24px;height:2px;transition:all .25s cubic-bezier(.4,0,.2,1);display:block}.burger-button.open .burger-line:first-child{transform:rotate(45deg)}.burger-button.open .burger-line:nth-child(2){opacity:0;transform:scaleX(0)}.burger-button.open .burger-line:nth-child(3){transform:rotate(-45deg)}.mobile-nav{box-sizing:border-box;background-color:var(--bg-card);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-md);opacity:0;visibility:hidden;z-index:999;flex-direction:column;gap:16px;padding:16px 24px 24px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:70px;left:0;right:0;transform:translateY(-110%)}.mobile-nav.open{opacity:1;visibility:visible;transform:translateY(0)}.mobile-theme{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:8px 0;display:flex}.mobile-theme-label{color:var(--text-main);font-size:15px;font-weight:600}.mobile-link{color:var(--text-main);border-bottom:1px solid var(--border-color);padding:8px 0;font-size:15px;font-weight:600;text-decoration:none;transition:color .2s}.mobile-link:hover{color:var(--primary-color)}.mobile-actions{margin-top:8px}.w-full{width:100%}@media (width>=769px){.header-content{padding:0 24px}.header-nav{display:flex}.burger-button,.mobile-nav{display:none}.header-actions .btn-cta{display:inline-flex}.header-actions .theme-toggle{display:flex}}@media (width<=768px){.header-nav,.header-actions .btn-cta{display:none}.burger-button{display:flex}}.article{background-color:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);font-family:var(--font-family);border-radius:12px;align-items:center;gap:16px;margin-bottom:12px;padding:12px 20px;transition:all .2s ease-in-out;display:flex}.article:hover{box-shadow:var(--shadow-md);border-color:var(--text-muted);transform:translateY(-1px)}.article:has(input[type=checkbox]:checked){background-color:var(--bg-checked);border-color:var(--border-color);opacity:.75}.article:has(input[type=checkbox]:checked) h5{color:var(--text-muted);text-decoration:line-through}.article input[type=checkbox]{appearance:none;border:2px solid var(--text-muted);cursor:pointer;border-radius:6px;outline:none;flex-shrink:0;place-content:center;width:20px;height:20px;transition:all .15s ease-in-out;display:grid}.article input[type=checkbox]:checked{background-color:var(--primary-color);border-color:var(--primary-color)}.article input[type=checkbox]:checked:before{content:"";border-bottom:2px solid #fff;border-left:2px solid #fff;width:10px;height:6px;transform:rotate(-45deg)translate(1px,-1px)}.article input[type=checkbox]:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.article input[type=number]{border:1px solid var(--border-color);width:70px;color:var(--text-main);background-color:var(--bg-input);text-align:center;border-radius:8px;outline:none;flex-shrink:0;padding:8px 10px;font-size:14px;font-weight:600;transition:all .2s ease-in-out}.article input[type=number]:focus{border-color:var(--primary-color);background-color:var(--bg-card);box-shadow:0 0 0 3px #3b82f626}.article h5{color:var(--text-main);text-align:left;word-break:break-word;flex-grow:1;min-width:0;margin:0;font-size:16px;font-weight:600;transition:color .2s}.article button{background-color:var(--danger-color);color:#fff;cursor:pointer;border:none;border-radius:8px;flex-shrink:0;padding:8px 16px;font-size:13px;font-weight:600;transition:all .15s ease-in-out}.article button:hover{background-color:var(--danger-hover);box-shadow:0 2px 4px #ef444433}.article button:active{transform:scale(.96)}.article .loader{color:var(--text-muted);text-align:right;justify-content:flex-end;align-items:center;min-width:85px;font-size:13px;font-style:italic;font-weight:500;display:flex}.article .loader:not(:empty){animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.8;transform:scale(.98)}50%{opacity:1;transform:scale(1)}}@media (width<=480px){.article{flex-wrap:wrap;gap:12px;padding:16px}.article h5{order:3;width:calc(100% - 110px)}.article button{order:4;width:100%}.article .loader{text-align:center;order:5;justify-content:center;width:100%}.article input[type=number]{order:2}.article input[type=checkbox]{order:1}}div:has(>.menu-articles){background-color:var(--bg-card);border:1px solid var(--border-color);max-width:650px;box-shadow:var(--shadow-lg);font-family:var(--font-family);border-radius:16px;margin:16px;padding:24px 20px;transition:background-color .3s,border-color .3s,box-shadow .3s}div:has(>.menu-articles) h1{color:var(--text-main);letter-spacing:-.025em;border-bottom:2px solid var(--border-color);text-transform:capitalize;margin-top:0;margin-bottom:24px;padding-bottom:12px;font-size:26px;font-weight:800}.menu-articles input[type=text]{border:1px solid var(--border-color);color:var(--text-main);background-color:var(--bg-card);border-radius:10px;outline:none;flex:2;padding:11px 16px;font-size:14px;transition:all .2s ease-in-out}.menu-articles input[type=text]:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f626}.menu-articles button{cursor:pointer;white-space:nowrap;border:none;border-radius:10px;padding:11px 18px;font-size:13.5px;font-weight:600;transition:all .15s ease-in-out}.menu-articles button:active{transform:scale(.97)}.menu-articles button:first-of-type{background-color:var(--primary-color);color:#fff;flex:1}.menu-articles button:first-of-type:hover{background-color:var(--primary-hover);box-shadow:0 4px 10px #3b82f633}.menu-articles button:nth-of-type(2){background-color:var(--bg-input);color:var(--text-main);border:1px solid var(--border-color);flex:1}.menu-articles button:nth-of-type(2):hover{background-color:var(--border-color)}.loader{text-align:center;color:var(--text-muted);justify-content:center;align-items:center;min-height:20px;margin-bottom:16px;font-size:13.5px;font-style:italic;font-weight:500;display:flex}.loader:not(:empty){animation:1.5s ease-in-out infinite listPulse}@keyframes listPulse{0%,to{opacity:.5}50%{opacity:1}}.liste{margin-top:15px}.liste>div{flex-direction:column;gap:12px;display:flex}@media (width>=641px){div:has(>.menu-articles){margin:40px auto;padding:32px}}@media (width<=640px){.menu-articles{flex-direction:column;gap:8px}.menu-articles input[type=text],.menu-articles button{box-sizing:border-box;flex:none;width:100%}}div:has(>.menu-articles){background-color:var(--bg-glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);max-width:800px;box-shadow:var(--shadow-lg);font-family:var(--font-family);color:var(--text-main);border-radius:24px;margin:16px;padding:24px 20px;transition:background-color .3s,border-color .3s,box-shadow .3s}div:has(>.menu-articles)>h1{color:var(--text-main);letter-spacing:-.025em;margin-top:0;margin-bottom:24px;font-size:28px;font-weight:800}.loader{min-height:28px;margin-bottom:16px;transition:all .3s}.loader:not(:empty){color:var(--primary-color);background-color:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;align-items:center;gap:8px;padding:6px 14px;font-size:13px;font-weight:600;animation:1.5s ease-in-out infinite pulse;display:inline-flex}[data-theme=dark] .loader:not(:empty){background-color:#1e3a5f;border-color:#1e40af}.menu-articles{gap:12px;margin-bottom:32px;display:flex}.menu-articles input[type=text]{border:1.5px solid var(--border-color);color:var(--text-main);background-color:var(--bg-card);box-shadow:var(--shadow-sm);border-radius:12px;outline:none;flex:1;padding:12px 18px;font-family:inherit;font-size:14.5px;font-weight:500;transition:all .2s}.menu-articles input[type=text]:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px #3b82f61f, var(--shadow-sm);background-color:var(--bg-card)}.menu-articles input[type=text]::placeholder{color:var(--text-muted)}.menu-articles button{cursor:pointer;white-space:nowrap;border-radius:12px;padding:12px 20px;font-family:inherit;font-size:14px;font-weight:600;transition:all .2s}.menu-articles button:first-of-type{background-color:var(--primary-color);color:#fff;border:none;box-shadow:0 4px 10px #3b82f626}.menu-articles button:first-of-type:hover{background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 14px #3b82f640}.menu-articles button:first-of-type:active{transform:translateY(0)}.menu-articles button:nth-of-type(2){color:var(--text-muted);border:1.5px solid var(--border-color);background-color:#0000}.menu-articles button:nth-of-type(2):hover{color:var(--text-main);border-color:var(--text-muted);background-color:var(--bg-input)}.menu-articles+div{flex-direction:column;gap:14px;display:flex}.menu-articles+div>div{background-color:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:16px;grid-template-columns:1fr auto auto;grid-template-areas:"name date delete";align-items:center;gap:16px;padding:16px 20px;transition:all .25s cubic-bezier(.4,0,.2,1);display:grid}.menu-articles+div>div:hover{box-shadow:var(--shadow-md);border-color:var(--primary-color);opacity:.9;transform:translateY(-2px)}.menu-articles+div>div>button:first-of-type{color:var(--danger-color);border:1px solid var(--danger-color);cursor:pointer;background-color:#0000;border-radius:8px;grid-area:delete;padding:8px 14px;font-size:13px;font-weight:600;transition:all .2s}.menu-articles+div>div>button:first-of-type:hover{background-color:var(--danger-color);color:#fff;border-color:var(--danger-color)}.menu-articles+div>div>button:nth-of-type(2){text-align:left;color:var(--text-main);cursor:pointer;background:0 0;border:none;grid-area:name;align-items:center;gap:10px;margin:0;padding:0;font-family:inherit;font-size:16px;font-weight:700;transition:color .2s;display:flex}.menu-articles+div>div>button:nth-of-type(2):hover{color:var(--primary-color)}.menu-articles+div>div>button:nth-of-type(2):before{content:"📁";filter:grayscale()contrast(.5);font-size:16px;transition:filter .2s}.menu-articles+div>div:hover>button:nth-of-type(2):before{filter:none}.menu-articles+div>div>h5{color:var(--text-muted);background-color:var(--bg-input);white-space:nowrap;border-radius:6px;grid-area:date;margin:0;padding:4px 10px;font-size:12.5px;font-weight:500}@media (width>=641px){div:has(>.menu-articles){margin:40px auto;padding:32px}}@media (width<=640px){.menu-articles{flex-direction:column;gap:8px}.menu-articles input[type=text],.menu-articles button{box-sizing:border-box;width:100%}.menu-articles+div>div{grid-template-columns:1fr;grid-template-areas:"name""date""delete";gap:10px;padding:16px}.menu-articles+div>div>button:first-of-type{text-align:center;width:100%;margin-top:4px;padding:10px}.menu-articles+div>div>h5{align-self:flex-start}}