:root{--primary-color:#6366f1;--primary-hover:#818cf8;--bg-color:#0f172a;--surface-color:#1e293b;--text-main:#f8fafc;--text-muted:#94a3b8;--border-color:#334155;--hover-bg:#ffffff0d;--active-bg:#6366f126;--shadow-sm:0 1px 2px 0 #0000004d;--shadow-md:0 4px 6px -1px #00000080,0 2px 4px -1px #0000004d;--sidebar-width-expanded:220px;--sidebar-width-collapsed:60px;--header-height:70px;--transition-speed:0.3s}html{font-size:70%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f172a;background-color:var(--bg-color);color:#f8fafc;color:var(--text-main);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;max-width:100vw;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*,:after,:before{box-sizing:border-box}.form-group{margin-bottom:1.25rem}.form-group label{color:#94a3b8;color:var(--text-muted);display:block;font-size:.9rem;font-weight:500;margin-bottom:.5rem}.form-input{background-color:#0f172a;background-color:var(--bg-color);border:1px solid #334155;border:1px solid var(--border-color);border-radius:8px;box-sizing:border-box;color:#f8fafc;color:var(--text-main);font-size:.95rem;padding:12px;transition:all .2s;width:100%}.form-input:focus{border-color:#6366f1;border-color:var(--primary-color);box-shadow:0 0 0 2px #6366f133;outline:none}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.layout-container{background-color:var(--bg-color);color:var(--text-main);display:flex;font-family:Inter,system-ui,-apple-system,sans-serif;min-height:100vh}.sidebar{background-color:var(--surface-color);border-right:1px solid var(--border-color);box-shadow:var(--shadow-md);display:flex;flex-direction:column;height:100vh;left:0;position:fixed;top:0;transition:transform var(--transition-speed) ease,width var(--transition-speed) ease;z-index:50}.sidebar.expanded{width:var(--sidebar-width-expanded)}.sidebar.collapsed{width:var(--sidebar-width-collapsed)}.sidebar-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;height:var(--header-height);justify-content:center;padding:0 1rem}.sidebar.expanded .sidebar-header{justify-content:space-between}.logo-text{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#6366f1,#a855f7);background-clip:text;-webkit-background-clip:text;color:var(--primary-color);font-size:1.5rem;font-weight:800;overflow:hidden;white-space:nowrap}.toggle-btn{align-items:center;background:none;border:1px solid #0000;border-radius:8px;color:var(--text-muted);cursor:pointer;display:flex;justify-content:center;padding:6px;transition:all .2s}.toggle-btn:hover{background-color:var(--hover-bg);border-color:var(--border-color);color:var(--primary-color)}.sidebar-nav{flex:1 1;padding:1rem .75rem}.nav-item{align-items:center;background:none;border:none;border-radius:.75rem;color:var(--text-muted);cursor:pointer;display:flex;font-size:1rem;margin-bottom:.5rem;overflow:hidden;padding:.75rem 1rem;text-align:left;text-decoration:none;transition:all .2s;white-space:nowrap}.nav-item:hover{background-color:var(--hover-bg);color:var(--text-main)}.nav-item.active{background-color:var(--active-bg);font-weight:600}.nav-item.active,.nav-item.active .nav-icon{color:var(--primary-color)}.nav-icon{align-items:center;display:flex;justify-content:center;margin-right:12px;min-width:24px}.submenu-container{overflow:hidden;transition:max-height .3s ease-in-out}.nav-sub-item{align-items:center;border-radius:.75rem;box-sizing:border-box;color:var(--text-muted);display:flex;font-size:.9rem;margin-bottom:.25rem;padding:.5rem 1rem .5rem 3.5rem;text-decoration:none;transition:all .2s;width:100%}.nav-sub-item:hover{background-color:var(--hover-bg);color:var(--text-main)}.nav-sub-item.active{background-color:var(--active-bg);color:var(--primary-color);font-weight:600}.menu-arrow{margin-left:auto;transition:transform .2s}.sidebar.collapsed .nav-item{justify-content:center!important;padding:.75rem 0}.sidebar.collapsed .nav-icon{margin-right:0}.sidebar.collapsed .menu-arrow,.sidebar.collapsed .nav-text{display:none}.sidebar.collapsed .submenu-container{display:block}.sidebar.collapsed .nav-sub-item{justify-content:center;padding:.75rem 0}.sidebar.collapsed .nav-sub-item span{display:none}.sidebar.collapsed .nav-sub-item .nav-icon,.sidebar.collapsed .nav-sub-item svg{margin-right:0!important}.main-wrapper{display:flex;flex:1 1;flex-direction:column;margin-left:var(--sidebar-width-expanded);min-width:0;position:relative;transition:margin-left var(--transition-speed) ease}.main-wrapper.wrapper-collapsed{margin-left:var(--sidebar-width-collapsed)}.main-wrapper.no-sidebar{margin-left:0}.top-header{align-items:center;background-color:var(--surface-color);border-bottom:1px solid var(--border-color);display:flex;height:var(--header-height);justify-content:space-between;padding:0 2rem;position:-webkit-sticky;position:sticky;top:0;transition:all .3s ease;z-index:999}.top-header.header-scrolled{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#1e293bd9;box-shadow:0 10px 15px -3px #0000004d}.mobile-menu-btn{display:none}.header-logo{align-items:center;display:flex;transition:transform .2s ease;-webkit-user-select:none;user-select:none}.header-logo:hover{transform:scale(1.05)}.header-logo.hide-on-desktop{display:none}.hide-on-desktop+.header-nav{margin-left:0}@media (max-width:768px){.header-logo.hide-on-desktop{display:flex}}.header-nav{align-items:center;display:flex;gap:2.5rem;margin-left:3rem;margin-right:auto}.nav-link{color:var(--text-muted);cursor:pointer;font-size:.9rem;font-weight:600;letter-spacing:.05em;text-decoration:none;text-transform:uppercase;transition:all .2s}.nav-link:hover{color:var(--primary-color)}.header-user-section{align-items:center;display:flex;gap:1.5rem}.auth-buttons{align-items:center;display:flex;gap:1rem}.login-link{color:var(--text-main);font-weight:500}.login-link,.register-btn{font-size:.9rem;text-decoration:none}.register-btn{background:var(--primary-color);border-radius:8px;color:#fff;font-weight:600;padding:.5rem 1.25rem;transition:background .2s}.register-btn:hover{background:var(--primary-hover)}.header-cart-btn{align-items:center;color:var(--text-muted);display:flex;justify-content:center;margin-right:.5rem;padding:8px;position:relative;transition:all .2s}.header-cart-btn:hover{background-color:var(--hover-bg);border-radius:50%;color:var(--primary-color)}.cart-badge{background:linear-gradient(135deg,#6366f1,#a855f7);border:2px solid var(--surface-color);border-radius:50%;box-shadow:0 4px 6px -1px #0000004d;color:#fff;font-size:.65rem;font-weight:700;height:18px;position:absolute;right:4px;top:4px;width:18px}.cart-badge,.header-icon-btn{align-items:center;display:flex;justify-content:center}.header-icon-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:8px;position:relative;transition:all .2s}.header-icon-btn:hover{background-color:var(--hover-bg);border-radius:50%;color:var(--primary-color)}.user-dropdown-container{position:relative}.user-profile-clickable{align-items:center;border-radius:12px;cursor:pointer;display:flex;gap:1rem;padding:.5rem .75rem;transition:all .2s ease}.user-profile-clickable.active,.user-profile-clickable:hover{background-color:var(--hover-bg)}.header-dropdown-menu{animation:dropdownFadeIn .2s ease-out;background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 20px 25px -5px #0006,0 10px 10px -5px #0003;padding:.75rem;position:absolute;right:0;top:calc(100% + 10px);width:240px;z-index:100}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{display:flex;flex-direction:column;padding:.75rem .5rem}.dropdown-user-name{color:var(--text-main);font-size:.95rem;font-weight:600}.dropdown-user-email{color:var(--text-muted);font-size:.8rem;margin-top:2px}.dropdown-divider{background-color:var(--border-color);height:1px;margin:.5rem 0}.dropdown-item{align-items:center;background:#0000;border:none;border-radius:10px;color:var(--text-main);cursor:pointer;display:flex;font-size:.9rem;gap:10px;padding:.75rem;transition:all .2s ease;width:100%}.dropdown-item:hover{background-color:var(--hover-bg);padding-left:1rem}.dropdown-item.logout{color:#ef4444}.dropdown-item.logout:hover{background-color:#ef44441a}.user-info{text-align:right}.user-name{color:var(--text-main);display:block;font-size:.9rem;font-weight:600}.user-role{color:var(--text-muted);display:block;font-size:.75rem;letter-spacing:.05em;margin-top:2px;text-transform:uppercase}.avatar{align-items:center;background:linear-gradient(135deg,#6366f1,#a855f7);border-radius:50%;box-shadow:0 0 0 2px var(--surface-color),0 0 0 4px var(--primary-color);color:#fff;display:flex;font-size:1.1rem;font-weight:700;height:40px;justify-content:center;width:40px}.main-content{background-color:var(--bg-color);flex:1 1;padding:1rem}.main-content.no-padding{background-color:initial;padding:0}.main-content h1{color:var(--text-main)}.main-content p{color:var(--text-muted)}@media (max-width:991px){.header-nav{display:none!important}}@media (max-width:768px){.sidebar{box-shadow:none;display:flex!important;transform:translateX(-100%);width:var(--sidebar-width-expanded)}.main-wrapper{margin-left:0!important}.sidebar.mobile-open{box-shadow:var(--shadow-md);transform:translateX(0);z-index:100}.mobile-menu-btn{align-items:center;background:none;border:1px solid var(--border-color);border-radius:8px;color:var(--text-muted);cursor:pointer;display:flex!important;justify-content:center;padding:6px}.mobile-menu-btn:hover{background-color:var(--hover-bg);color:var(--primary-color)}.desktop-toggle{display:none!important}.mobile-close{display:flex!important}.top-header{padding:0 1rem}.header-user-section{gap:.75rem}.logout-btn span,.user-info{display:none}.avatar{font-size:.9rem;height:32px;width:32px}.auth-buttons{gap:.5rem}.register-btn{padding:.4rem .8rem}.login-link,.register-btn{font-size:.8rem}.logo-text{font-size:1.25rem}}.landing-links-container{display:none}@media (max-width:768px){.landing-links-container{display:block!important}}.dashboard-btn-sidebar:hover{background:#6366f133!important;border-color:var(--primary-color)!important;transform:translateY(-1px)}@media (min-width:769px){.sidebar.landing-sidebar{pointer-events:none;transform:translateX(-100%)}}.sidebar-footer.mobile-only{display:none}@media (max-width:768px){.sidebar-footer.mobile-only{border-top:1px solid var(--border-color);display:block!important;margin-top:auto;padding:1.5rem}.sidebar-auth-buttons{display:flex;flex-direction:column;gap:.75rem}.login-link-mobile{border:1px solid var(--border-color);color:var(--text-main);font-weight:500}.login-link-mobile,.register-btn-mobile{border-radius:8px;padding:.75rem;text-align:center;text-decoration:none;transition:all .2s}.register-btn-mobile{background-color:var(--primary-color);color:#fff;font-weight:600}.sidebar-auth-logged-in{align-items:center;display:flex;gap:1rem;justify-content:space-between}.user-profile-mini{align-items:center;cursor:pointer;display:flex;gap:.75rem}.u-name{color:var(--text-main);display:block;font-size:.9rem;font-weight:600}.u-role{color:var(--text-muted);display:block;font-size:.75rem;text-transform:capitalize}.sidebar-logout{align-items:center;background:#ef44441a;border:1px solid #ef444433;border-radius:6px;color:#ef4444;display:flex;justify-content:center;padding:8px}}@media (max-width:500px){.header-user-section{gap:.5rem}}@media (max-width:400px){.top-header{padding:0 .5rem}.user-profile-clickable{padding:.25rem}.header-user-section{gap:.35rem}.header-dropdown-menu{right:.5rem;width:calc(100vw - 1rem)}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}